subhajit maity
subhajit maity

Reputation: 83

When import MatButtonModule in main module.ts it is not working

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.

app.module.ts

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

Answers (1)

Pierre Mallet
Pierre Mallet

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

Related Questions