Shouldn't imports on the root level be available globally (With globally I mean to all sub-modules and components)?
I have the following root/app module :
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, ApplicationRef } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { appRouterProviders, routing } from './app.routes';
import { DashboardModule } from './dashboard/dashboard.module';
import { DecisionModule } from './decision/decision.module';
import { MdCoreModule } from '@angular2-material/core';
import { MdButtonModule } from '@angular2-material/button';
import { MdCardModule } from '@angular2-material/card';
import { MdListModule } from '@angular2-material/list';
import { MdSidenavModule } from '@angular2-material/sidenav';
import { MdToolbarModule } from '@angular2-material/toolbar';
import { MdIconModule } from '@angular2-material/icon';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
CommonModule,
FormsModule,
HttpModule,
RouterModule,
routing,
DashboardModule,
MdCoreModule,
MdButtonModule,
MdCardModule,
MdListModule,
MdSidenavModule,
MdToolbarModule,
MdIconModule
],
providers: [
appRouterProviders
],
entryComponents: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule {
}
If I try to use the material elements in one of my sub modules they don't display, this is what the sub module looks like:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { dashboardRouting } from './dashboard.routes';
import { DashboardComponent } from './dashboard.component';
import { ActionsDialogComponent } from './actions-dialog';
@NgModule({
imports: [
CommonModule,
FormsModule,
dashboardRouting,
],
declarations: [
DashboardComponent,
ActionsDialogComponent
],
providers: [
]
})
export class DashboardModule {}
However if I import the material modules in the submodule they display. This is what the submodule looks like when the material design components work:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { dashboardRouting } from './dashboard.routes';
import { DashboardComponent } from './dashboard.component';
import { ActionsDialogComponent } from './actions-dialog';
import { MdCoreModule } from '@angular2-material/core';
import { MdButtonModule } from '@angular2-material/button';
import { MdCardModule } from '@angular2-material/card';
import { MdListModule } from '@angular2-material/list';
import { MdSidenavModule } from '@angular2-material/sidenav';
import { MdToolbarModule } from '@angular2-material/toolbar';
import { MdIconModule } from '@angular2-material/icon';
@NgModule({
imports: [
CommonModule,
FormsModule,
dashboardRouting,
MdCoreModule,
MdButtonModule,
MdCardModule,
MdListModule,
MdSidenavModule,
MdToolbarModule,
MdIconModule,
],
declarations: [
DashboardComponent,
ActionsDialogComponent
],
providers: [
]
})
export class DashboardModule {}
Why must the material modules be imported on the sublevel again if they are already imported at the root level?
See Question&Answers more detail:
os