Search code examples
javascriptangularangular2-components

Wrap multiple modules in single Module Angular 2?

I have a component library having around 20 modules. I want to wrap them up into a single service and export so that it can be globally injected. When I do this and inject it into app.module.ts, the features are not able to find the component.

My CoreComponentModule with all other modules look like this.

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 { }

I also have a feature module which consist of all the different features as shown below:-

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{

}

At last the app.module looks like the following:-

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 { }

I am not able to understand why this throws error regarding the components as well as I am not able to use any component. Am I over wrapping the components. I tool reference/inspiration from Angular 2 Material git repo. Please direct me if I have done something wrong.

The Error That I am getting is as follows:-

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

Sample Breadcrumb component:-

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 { }

Image for the Folder Structure and each component being a module enter image description here

Solution

  • Components can't be made available globally.

    Every module where components, directives, or pipes are used need to have the module that provides these listed in imports: []

    It is not enough to import them in AppModule only.