Shiv Kumar Ganesh Shiv Kumar Ganesh - 4 years ago 189
AngularJS Question

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

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download