CODEWITHSUNDEEP
angular
Jobsdev
Jobsdev

Reputation: 1039

Import of angular material in upper module does not work

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: enter image description here

Could someone give me a tip?

Upvotes: 3

Views: 1468

Answers (1)

Dekonunes
Dekonunes

Reputation: 559

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.

Upvotes: 2

Related Questions