하나의 모듈에 여러 개의 모듈을 감 쌉니다.

Question

약 20 개의 모듈을 가진 컴포넌트 라이브러리가 있습니다. 전 세계적으로 그들을 주입 할 수 있도록 단일 서비스와 수출로 포장하고 싶습니다. 이 작업을 수행하여 app.module.ts에 삽입하면 기능에서 해당 구성 요소를 찾을 수 없습니다.

다른 모든 모듈이 포함 된 My CoreComponentModule은 다음과 같습니다.

import { NgModule } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 

import { BreadcrumbModule } from './core/breadcrumb'; 
import { ButtonModule } from './core/button'; 
import { CheckboxModule } from './core/checkbox'; 
import { ChipsModule } from './core/chips'; 
import { DatepickerModule } from './core/datepicker'; 
import { ErrorMessagesModule } from './core/error-messages'; 
import { HeaderModule } from './core/header'; 
import { IconModule } from './core/icon'; 
import { InputModule } from './core/input'; 
import { MultiselectModule } from './core/multiselect'; 
import { ProgressSpinnerModule } from './core/progress-spinner'; 
import { RadioButtonModule } from './core/radio-button'; 
import { SelectModule } from './core/select'; 
import { SideNavModule } from './core/side-nav'; 
import { SlideToggleModule } from './core/slide-toggle'; 
import { SliderModule } from './core/slider'; 
import { TooltipModule } from './core/tooltip'; 
import { WizardModule } from './core/wizard'; 

const CORE_COMPONENT_MODULES = [ 
    CommonModule, 
    BreadcrumbModule, 
    ButtonModule, 
    CheckboxModule, 
    ChipsModule, 
    DatepickerModule, 
    ErrorMessagesModule, 
    HeaderModule, 
    IconModule, 
    InputModule, 
    MultiselectModule, 
    ProgressSpinnerModule, 
    RadioButtonModule, 
    SelectModule, 
    SideNavModule, 
    SlideToggleModule, 
    TooltipModule, 
    WizardModule 
] 

@NgModule({ 
    imports: CORE_COMPONENT_MODULES, 
    exports: CORE_COMPONENT_MODULES, 
}) 
export class CoreComponentModule { } 

나는 또한 아래 그림과 같이 모든 다른 기능으로 구성 기능 모듈이

: -

import {NgModule} from '@angular/core'; 
import {LoginModule} from './auth'; 
import {DashboardModule} from './dashboard'; 
import {CoreComponentModule} from '../components'; 
@NgModule({ 
    imports:[ 
     CoreComponentModule, 
     LoginModule, 
     DashboardModule 
    ], 
    exports:[ 
     LoginModule, 
     DashboardModule 
    ] 
}) 

export class ViewModule{ 

} 

가 마침내 app.module은 다음과 같습니다를 : -

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 
import { AppRoutingModule } from './app-routing.module'; 

import { CoreComponentModule } from './components'; 
import { ViewModule } from './views; 

import { AppComponent } from './app.component'; 

@NgModule({ 
    declarations: [ 
    AppComponent 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    AppRoutingModule, 
    CoreComponentModule, 
    ViewModule 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

왜 구성 요소와 관련하여 오류가 throw되는 이유와 구성 요소를 사용할 수 없는지 이해할 수 없습니다. 구성 요소를 래핑하는 중입니다. 나는 Angular 2 Material git repo에서 공구 참조/영감을 얻습니다. 제가 잘못한 것을 지시하면 저에게 지시하십시오. 다음과 같이

내가 점점 오전 오류 : -

Unhandled Promise rejection: Template parse errors: 
'app-breadcrumb' is not a known element: 
1. If 'app-breadcrumb' is an Angular component, then verify that it is part of this module. 
2. If 'app-breadcrumb' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("<p> 
    login works! 
    [ERROR ->]<app-breadcrumb></app-breadcrumb> 
</p> 
"): LoginComponent@2:2 ; Zone: <root> ; Task: Promise.then ; Value: SyntaxError__zone_symbol__error: Error: Template parse errors: 
'app-breadcrumb' is not a known element: 
1. If 'app-breadcrumb' is an Angular component, then verify that it is part of this module. 
2. If 'app-breadcrumb' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("<p> 
    login works! 
    [ERROR ->]<app-breadcrumb></app-breadcrumb> 
</p> 
"): LoginComponent@2:2 
    at SyntaxError.ZoneAwareError (http://localhost:4200/vendor.bundle.js:96291:33) 
    at SyntaxError.BaseError [as constructor] (http://localhost:4200/vendor.bundle.js:73328:16) 
    at new SyntaxError (http://localhost:4200/vendor.bundle.js:6048:16) 
    at TemplateParser.parse (http://localhost:4200/vendor.bundle.js:20378:19) 
    at JitCompiler._compileTemplate (http://localhost:4200/vendor.bundle.js:53611:68) 
    at http://localhost:4200/vendor.bundle.js:53494:62 
    at Set.forEach (native) 
    at JitCompiler._compileComponents (http://localhost:4200/vendor.bundle.js:53494:19) 
    at createResult (http://localhost:4200/vendor.bundle.js:53376:19) 
    at ZoneDelegate.invoke (http://localhost:4200/vendor.bundle.js:95722:26) 
    at Zone.run (http://localhost:4200/vendor.bundle.js:95593:43) 
    at http://localhost:4200/vendor.bundle.js:96015:57 
    at ZoneDelegate.invokeTask (http://localhost:4200/vendor.bundle.js:95755:35) 
    at Zone.runTask (http://localhost:4200/vendor.bundle.js:95631:47) 
    at drainMicroTaskQueue (http://localhost:4200/vendor.bundle.js:95913:35)__zone_symbol__message: "Template parse errors:↵'app-breadcrumb' is not a known element:↵1. If 'app-breadcrumb' is an Angular component, then verify that it is part of this module.↵2. If 'app-breadcrumb' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("<p>↵ login works!↵ [ERROR ->]<app-breadcrumb></app-breadcrumb>↵</p>↵"): LoginComponent@2:2"__zone_symbol__stack: "Error: Template parse errors:↵'app-breadcrumb' is not a known element:↵1. If 'app-breadcrumb' is an Angular component, then verify that it is part of this module.↵2. If 'app-breadcrumb' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("<p>↵ login works!↵ [ERROR ->]<app-breadcrumb></app-breadcrumb>↵</p>↵"): LoginComponent@2:2↵ at SyntaxError.ZoneAwareError (http://localhost:4200/vendor.bundle.js:96291:33)↵ at SyntaxError.BaseError [as constructor] (http://localhost:4200/vendor.bundle.js:73328:16)↵ at new SyntaxError (http://localhost:4200/vendor.bundle.js:6048:16)↵ at TemplateParser.parse (http://localhost:4200/vendor.bundle.js:20378:19)↵ at JitCompiler._compileTemplate (http://localhost:4200/vendor.bundle.js:53611:68)↵ at http://localhost:4200/vendor.bundle.js:53494:62↵ at Set.forEach (native)↵ at JitCompiler._compileComponents (http://localhost:4200/vendor.bundle.js:53494:19)↵ at createResult (http://localhost:4200/vendor.bundle.js:53376:19)↵ at ZoneDelegate.invoke (http://localhost:4200/vendor.bundle.js:95722:26)↵ at Zone.run (http://localhost:4200/vendor.bundle.js:95593:43)↵ at http://localhost:4200/vendor.bundle.js:96015:57↵ at ZoneDelegate.invokeTask (http://localhost:4200/vendor.bundle.js:95755:35)↵ at Zone.runTask (http://localhost:4200/vendor.bundle.js:95631:47)↵ at drainMicroTaskQueue (http://localhost:4200/vendor.bundle.js:95913:35)"_nativeError: ZoneAwareErrormessage: (...)get message:()set message: (value)name: (...)get name:()set name: (value)originalStack: (...)get originalStack:()set originalStack: (value)stack: (...)get stack:()set stack: (value)toSource:()toString:()zoneAwareStack: (...)get zoneAwareStack:()set zoneAwareStack: (value)__proto__: BaseError Error: Template parse errors: 
'app-breadcrumb' is not a known element: 
1. If 'app-breadcrumb' is an Angular component, then verify that it is part of this module. 
2. If 'app-breadcrumb' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("<p> 
    login works! 
    [ERROR ->]<app-breadcrumb></app-breadcrumb> 
</p> 
"): LoginComponent@2:2 
    at SyntaxError.ZoneAwareError (http://localhost:4200/vendor.bundle.js:96291:33) 
    at SyntaxError.BaseError [as constructor] (http://localhost:4200/vendor.bundle.js:73328:16) 
    at new SyntaxError (http://localhost:4200/vendor.bundle.js:6048:16) 
    at TemplateParser.parse (http://localhost:4200/vendor.bundle.js:20378:19) 
    at JitCompiler._compileTemplate (http://localhost:4200/vendor.bundle.js:53611:68) 
    at http://localhost:4200/vendor.bundle.js:53494:62 
    at Set.forEach (native) 
    at JitCompiler._compileComponents (http://localhost:4200/vendor.bundle.js:53494:19) 
    at createResult (http://localhost:4200/vendor.bundle.js:53376:19) 
    at ZoneDelegate.invoke (http://localhost:4200/vendor.bundle.js:95722:26) 
    at Zone.run (http://localhost:4200/vendor.bundle.js:95593:43) 
    at http://localhost:4200/vendor.bundle.js:96015:57 
    at ZoneDelegate.invokeTask (http://localhost:4200/vendor.bundle.js:95755:35) 
    at Zone.runTask (http://localhost:4200/vendor.bundle.js:95631:47) 
    at drainMicroTaskQueue (http://localhost:4200/vendor.bundle.js:95913:35) 
consoleError @ zone.js:420 
_loop_1 @ zone.js:449 
drainMicroTaskQueue @ zone.js:453 

샘플 이동 경로 구성 요소 : -

import { NgModule } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { BreadcrumbComponent } from './breadcrumb.component'; 

@NgModule({ 
    imports: [ 
    CommonModule 
    ], 
    declarations: [ 
    BreadcrumbComponent 
    ], 
    exports: [ 
    BreadcrumbComponent 
    ] 
}) 
export class BreadcrumbModule { } 

이미지 폴더 구조 및 각 구성 요소는 모듈

Answer 1

에게 인

전세계에서 구성 요소를 사용할 수 없습니다.

구성 요소, 지침, 또는 파이프 이러한 단지 AppModule에 가져올하는 것만으로는 충분하지 않습니다 imports: []

에 나열된 제공하는 모듈을 가질 필요가 사용하는 모든 모듈.