Error trying to use a shared module in Angular 9 make my components cant recognise my material module

Question

I have created a shared module to modularize my app so in case i want to use for example a Material component i can have it in other module by import it, the problem is when i do that give this kind of error If 'mat-menu' is an Angular component, then verify that it is part of this module. How can i solve it?.In the past without the shared module it worked perfectly but now no, and Its required to be with the shared module because its for homework

Below i will let my three modules

App Module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
//My imports
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { UsersDashboardComponent } from './components/users-dashboard/users-dashboard.component';
import { AdminDashboardComponent } from './components/admin-dashboard/admin-dashboard.component';
import { RouterModule } from '@angular/router';
import { HttpClientModule} from '@angular/common/http';
import { HomeAdminComponent } from './auth/home-admin/home-admin.component';
import { HomeComponent } from './auth/home/home.component';
import { CoreModule } from './../app/core/core.module';
@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AdminDashboardComponent,
    UsersDashboardComponent,
    HomeAdminComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgbModule,
    BrowserAnimationsModule,
    RouterModule,
    HttpClientModule,
    CoreModule,  
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Auth Module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SharedModule } from '../shared/shared.module';
import { AuthRoutingModule } from './auth-routing.module';
import { HomeComponent } from 'src/app/auth/home/home.component';
import { HomeAdminComponent } from 'src/app/auth/home-admin/home-admin.component';

@NgModule({
  declarations: [HomeComponent,HomeAdminComponent],
  imports: [
    CommonModule,
    AuthRoutingModule,
    SharedModule,
  ],
})
export class AuthModule { }

Shared module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MaterialModule } from 'src/app/shared/material/material.module';
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    MaterialModule,
    ReactiveFormsModule
  ],
  exports: [
    MaterialModule,
    ReactiveFormsModule
  ]
})
export class SharedModule { }

Where are you using mat-menu in side Auth Module or App Module? Also, you can remove export in the shared module — prabhatojha
– prabhatojha, Commented Mar 2, 2020 at 3:27

HARI CHARAN K · Accepted Answer · 2020-03-02 02:28:15Z

1

To avoid this problem you need to Add SharedModule as an import in all the FeatureModules where your components reside as declarations. Same like you have done in AuthModule. And also all the material modules imported into the MaterialModule should be exported in exports.

answered Mar 2, 2020 at 2:28

HARI CHARAN K

793 bronze badges

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

1 Comment

bjdose Over a year ago

Additionally to Hari said, you also need to import the SharedModule into AppModule.

Rinzler21 · Accepted Answer · 2020-03-02 22:35:37Z

1

I solve it putting the SharedModule into the imports of the AppModule

edited Mar 2, 2020 at 22:35

answered Mar 2, 2020 at 22:26

Rinzler21

4761 gold badge10 silver badges30 bronze badges

Comments

Abdelrahman Hussien · Accepted Answer · 2020-03-02 22:32:37Z

0

I would recommend to create your own custom Components build on top whatever module you are using (in your case it is angular material) inside the shared module and then export these components and import your shared module in any other modules then, use these components, this will help you in the future if you decided to use another library instead of angular material or if you want to build some custom design.

answered Mar 2, 2020 at 22:32

Abdelrahman Hussien

5052 gold badges4 silver badges17 bronze badges

Collectives™ on Stack Overflow

Error trying to use a shared module in Angular 9 make my components cant recognise my material module

3 Answers 3

1 Comment

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Related