将多个模块包装在单个模块中 Angular 2?
Wrap multiple modules in single Module Angular 2?
我有一个包含大约 20 个模块的组件库。我想将它们包装成一个服务并导出,以便它可以全局注入。当我这样做并将其注入 app.module.ts 时,功能无法找到该组件。
我的 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 { }
我无法理解为什么这会引发有关组件的错误,而且我无法使用任何组件。我是不是过度包装了组件。
我从 Angular 2 Material git 回购工具 reference/inspiration。如果我做错了什么,请指导我。
我得到的错误如下:-
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 { }
文件夹结构图片,每个组件都是一个模块
无法在全球范围内提供组件。
每个使用组件、指令或管道的模块都需要在 imports: []
中列出提供这些的模块
仅在 AppModule
中导入它们是不够的。
我有一个包含大约 20 个模块的组件库。我想将它们包装成一个服务并导出,以便它可以全局注入。当我这样做并将其注入 app.module.ts 时,功能无法找到该组件。
我的 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 { }
我无法理解为什么这会引发有关组件的错误,而且我无法使用任何组件。我是不是过度包装了组件。 我从 Angular 2 Material git 回购工具 reference/inspiration。如果我做错了什么,请指导我。
我得到的错误如下:-
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 { }
文件夹结构图片,每个组件都是一个模块
无法在全球范围内提供组件。
每个使用组件、指令或管道的模块都需要在 imports: []
仅在 AppModule
中导入它们是不够的。