Reputation: 83
In app folder there are another another sub module
called login
.There is login.component.ts
, login.module.ts
and login.component.html
. I want to use angular-material
for login.component.html
. If I import material component in login.module.ts
then its working fine. But if I import in app.module.ts it is not working any more.
import { BrowserModule } from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import {MatButtonModule} from '@angular/material/button';
import { LoginModule } from './login/login.module';
import { AppComponent } from './app.component';
import { loginRouting } from './login/login.routing';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,BrowserAnimationsModule,LoginModule,loginRouting,MatButtonModule
],
exports: [MatButtonModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
That is my app.module.ts
. My concert is that if I add the material component in root module that I need not to import it any sub module
as all sub module is imported in root module. Please advice how to achieve this. And what is the problem in my code.
Upvotes: 0
Views: 8735
Reputation: 7221
If you import MatButtonModule in you AppModule, then all his components/directive are available only in AppModule components.
You added MatButtonModule in your export section, but unless you import AppModule on your LoginModule, this won't make MatButtonModule available in LoginModule.
If you want to make MatButtonModule available in all your modules you should consider creating a shared module like describe here.
This shared module should contain all your globally available features and all your others modules should import it.
Hope it helps
Upvotes: 1