Currently working on Angular 4 and facing an issue with referencing a component from another module.
In my EngagementModule, the setup is defined as below:
import { NgModule } from '@angular/core';
// other imports...
@NgModule({
imports: [
// import statements...
],
exports: [EngagementListComponent, EngagementItemComponent, EngagementFilterPipe],
declarations: // component declarations...
providers: // providers...
})
export class EngagementModule { }
The EngagementListComponent is declared and exported within the module:
import {Component, OnInit} from "@angular/core";
// other imports...
@Component({
selector : "engagement-list" ,
templateUrl : "./app/engagements/engagement-list.component.html",
providers : [TaskService, MessageService],
})
export class EngagementListComponent implements OnInit {
(...)
In my main app module, I'm importing the EngagementModule like this:
import {NgModule} from "@angular/core";
// other imports...
import { EngagementModule } from "./engagements/engagement.module";
@NgModule({
imports: [CommonModule, BrowserAnimationsModule, routing,FormsModule, HttpModule, UtilsModule],
providers: // providers...
declarations: // component declarations...
bootstrap: [AppComponent]
})
class AppModule { }
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
Trying to use
Unhandled Promise rejection: Template parse errors: 'engagement-list' is not a known element:
What could be missing here?