javascript - 将多个模块包装在单个模块 Angular 2 中？

Question

我有一个包含大约 20 个模块的组件库。我想将它们包装成一个服务并导出，以便可以全局注入(inject)。当我这样做并将其注入(inject) 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 存储库。如果我做错了什么，请指导我。

我收到的错误如下:-

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

组件无法在全局范围内提供。

使用组件、指令或管道的每个模块都需要具有提供 imports: [] 中列出的这些模块

仅在 AppModule 中导入它们是不够的。