Import of angular material in upper module does not work

Question

I am having problem with import of module in angular 4. I have the following structure:

My app.module.ts

....
import { NavbarComponent } from './a2-components/navbar/navbar.component';
import { SidebarComponent } from './a2-components/sidebar/sidebar.component';
import {AdminModule} from './admin/admin.module';

@NgModule({
  imports: [
     ...
     AdminModule,
     MaterialModule.forRoot(),
     ...
  ],
  providers: [ ],
  declarations : [
    ...
    NavbarComponent,
    SidebarComponent,
    ...
  ],
  bootstrap: [ AppComponent ]
})

export class AppModule {

}

my admin.module

...
import { AdminComponent }     from './admin.component';
import { HomeComponent }      from './home/home.component';
import { AdminService }       from './admin.service';

@NgModule({
  imports: [ ... ],
  declarations: [ AdminComponent, HomeComponent ],
  providers:[ AdminComponent, AdminService ]
})
export class AdminModule {}

The app.module is a hierarchically larger module than admin.module. I'm importing the @angular/material, NavbarComponent and SidebarComponent, but I'm getting an error that the material, NavbarComponent and SidebarComponent are not being found in module admin.module.

Error image:

Could someone give me a tip?

Basically put you are not importing the required component declarations ( and all MaterialModule does is bundle up all component declarations ) in the scope of AdminModule or any other module. Just because you imported into AppModule the components are not automatically made available to other NgModule fixtures. That is actually part of the point of "modules" in Angular in the first place. The only things you should expect to be global are "services". And for which the "material" project no longer exports. — Neil Lunn
– Neil Lunn, Commented May 22, 2017 at 1:13

Dekonunes · Accepted Answer · 2017-05-22 00:33:24Z

2

Can we see your angular-cli.json, index.html or Style.css?

When you add a framework for style, like bootstrap, it's necessary link CSS to your new framework.

add this lines in your style.css:

@import '~https://fonts.googleapis.com/icon?family=Material+Icons';
@import '~@angular/material/core/theming/prebuilt/deeppurple-amber.css';
@import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

other think, when I add a material in a module, just put this codes:

import { MaterialModule } from '@angular/material';

@NgModule({
imports: [
  MaterialModule,
]})

This worked for me.

answered May 22, 2017 at 0:33

Dekonunes

5591 gold badge5 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Jobsdev Over a year ago

Thank you so much for answering me. But answer me one thing. Do you import the angular material into each submodule? I import in the app.module and it works for the components of the app.module, but does not work in sub modules. I thought about creating a shared module to import into each module, but I'm afraid of overloading my system.

Dekonunes Over a year ago

Yes, imported just in components of using material, I imported material a long time ago, but I think tryed import like you want too and don't had success. My application it's simple and cannot test perfomance. I think it's a greate way creating a shared module for this, will try in the future too.

Neil Lunn Over a year ago

@DaniloSantos Should note as well that whilst you "can" import MaterialModule like this you really should not. This will mess up any "tree shaking" optimization in shipping a production build of the application. Instead just import the required modules for the components actually used in your application module's scope. Usage of MaterialModule and MaterialModule.forRoot() should be considered deprecated. Expect those exports to disappear in future releases.

Jobsdev Over a year ago

Once again thank you both. @NeilLunn I think I understand. Sorry, my english, I'm from Brazil. what you said to me not load the entire library angular material. Instead I should only load what I will use. it is?

Neil Lunn Over a year ago

@DaniloSantos "lazy loading" is something completely different. There are module wrappers for each individual material component. i.e If you use a MdSidenav then you should be importing MdSidenavModule, and in practical cases that would have a list inside it so you would probably have both as MdSidenavModule, MdListModule in your module imports array. See the Material "Getting Started" for example usage.

|

Collectives™ on Stack Overflow

Import of angular material in upper module does not work

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related