Angular Component from a shared module not being recognised in Angular 9

Question

I have a shared module that exports material components, reactive forms and other things but when I try to do that I get these kinds of errors:

If 'mat-menu' is an Angular component, then verify that it is part of this module.

Until now I've been trying but it doesn't fix. How can I solve it?

Below I will show all my modules so you understand what I'm trying to do. My pages.module and auth.module are the ones that has the components that are trying to use the shared.module.

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 { RouterModule } from '@angular/router';
//import { HttpClientModule} from '@angular/common/http';
import { CoreModule } from './../app/core/core.module';
@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgbModule,
    BrowserAnimationsModule,
    RouterModule,
    CoreModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Material module

import { NgModule } from '@angular/core';
import {MatMenuModule} from '@angular/material/menu';
import {MatIconModule} from '@angular/material/icon';
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatButtonModule} from '@angular/material/button';
import {MatCardModule} from '@angular/material/card';
import {MatInputModule} from '@angular/material/input';
import {MatCheckboxModule} from '@angular/material/checkbox';
import {MatRadioModule} from '@angular/material/radio';
import { FormsModule } from '@angular/forms';
import {MatGridListModule} from '@angular/material/grid-list';
import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
import {MatSnackBarModule} from '@angular/material/snack-bar';
const MaterialComponents = [
    MatMenuModule,
    MatIconModule,
    MatToolbarModule,
    MatButtonModule,
    MatCardModule,
    MatInputModule,
    MatCheckboxModule,
    MatRadioModule,
    FormsModule,
    MatGridListModule,
    MatProgressSpinnerModule,
    MatSnackBarModule,

];
@NgModule({
  imports: [
    MaterialComponents
  ],
  exports: [
    MaterialComponents
  ]
})
export class MaterialModule { }

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 { }

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';
//import{ RoutingModule } from 'src/app/modules/routing.module';

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

Pages module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SharedModule } from '../shared/shared.module';
import { AdminDashboardComponent } from 'src/app/pages/admin-dashboard/admin-dashboard.component';
import { UsersDashboardComponent } from 'src/app/pages/users-dashboard/users-dashboard.component';
import { RoutingAdminModule } from 'src/app/pages/routing-admin.module';
import { RoutingUsersModule } from 'src/app/pages/routing-users.module';

@NgModule({
  declarations: [AdminDashboardComponent, UsersDashboardComponent],
  imports: [
    CommonModule,
    SharedModule,
    RoutingAdminModule,
    RoutingUsersModule,
  ]
})
export class PagesModule { }

Maybe this answers your question https://stackoverflow.com/questions/45166844/how-to-import-angular-material-in-project — hawks, Mar 05 '20 at 15:52
import { MaterialModule } from 'src/app/shared/material/material.module'; can you share your MaterialModule? Did you export all modules you need to use? like MatButtonModule, etc — critrange, Mar 05 '20 at 15:53
@ajuni880 No sorry In the past I've done an export of the material module without problems , my problem now is with using this shared module — Rinzler21, Mar 05 '20 at 15:54
Why are you importing `SharedModule` into the `AuthModule`, instead of into your root `AppModule`? Also it doesn't look like you import `AuthModule` anywhere either. Try importing `SharedModule` in your `AppModule` — Narm, Mar 05 '20 at 15:55
I import the `SharedModule` into the `AuthModule` because the `AuthModule` use the `MaterialModule` and `ReactiveForms`. This is for homework and it cant be in the `AppModule` @Narm — Rinzler21, Mar 05 '20 at 16:02

score 0 · Answer 1 · answered May 31 '20 at 16:05

The problem is you accidentally nested the array with the Imports array. The way to fix it would be

@NgModule({
  imports: [
    ...MaterialComponents
  ],
  exports: [
    ...MaterialComponents
  ]
})
export class MaterialModule { }

In your block of code, you are erroneously setting the first element of the imports array to an array you call "MaterialComponents"; you accidentally created an array within an array.

The difference between your code and the solution is the spread syntax (the three periods ...)

In this case, the spread syntax essentially just appends the elements of the "MaterialComponents" to the import array, which is what you want.

score -1 · Answer 2 · answered Mar 05 '20 at 16:05

-1

@NgModule({
  imports: [
    ...MaterialComponents
  ],
  exports: [
    ...MaterialComponents
  ]
})
export class MaterialModule { }

Or just:

@NgModule({
  imports: MaterialComponents,
  exports: MaterialComponents
})
export class MaterialModule { }

answered Mar 05 '20 at 16:05

critrange

5,652
2
16
47

I already have this, what is the difference of this and what I have? – Rinzler21 Mar 05 '20 at 16:07
exports: [ MaterialComponents ] This is wrong, i think? it means: export: [ [ MatButtonModule, MatCardModule, ... ] ] – critrange Mar 05 '20 at 16:09
Yes I export my `MaterialComponents` as you see in the question i made – Rinzler21 Mar 05 '20 at 16:11
You did `exports: [ MaterialComponents ]`, please remove the brackets – critrange Mar 05 '20 at 16:12
Thanks but i did just remove it and didn't make any changes – Rinzler21 Mar 05 '20 at 16:14
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/209099/discussion-between-robert-b-and-rinzler21). – critrange Mar 05 '20 at 16:16
An answer with code and no explanation is unlikely to be upvoted very often and more likely to be downvoted. – Heretic Monkey Mar 05 '20 at 18:17

Rinzler21 · Accepted Answer · 2020-04-23T14:49:48.057

This is how i solve it

Import the modules that have imported the shared module into the 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 { BrowserAnimationsModule } from '@angular/platform-browser/animations';
//import { HttpClientModule} from '@angular/common/http';
import { CoreModule } from './../app/core/core.module';
import { PagesModule } from './pages/pages.module';
import { AuthModule } from './auth/auth.module';
import { PagesUsersModule } from 'src/app/pages-users/pages-users.module';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    CoreModule,
    AuthModule,

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Import the shared module into the 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: [
    AuthRoutingModule,
    CommonModule,
    SharedModule,
  ],

})
export class AuthModule { }

Import the shared into the Pages module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SharedModule } from '../shared/shared.module';
import { AdminDashboardComponent } from 'src/app/pages/admin-dashboard/admin-dashboard.component';
import { RoutingAdminModule } from 'src/app/pages/routing-admin.module';

@NgModule({
  declarations: [AdminDashboardComponent],
  imports: [
    CommonModule,
    SharedModule,
    RoutingAdminModule,
  ],

})
export class PagesModule { }

App-routing.module

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

//My imports
import { HomeComponent } from './auth/home/home.component';
import { AuthGuard } from 'src/app/shared/guards/auth.guard';
import { HomeGuard } from 'src/app/shared/guards/home.guard';
import { AdminGuard } from 'src/app/shared/guards/admin.guard';

const routes: Routes = [

  { path: 'admin', loadChildren: './pages/pages.module#PagesModule', canActivate: [AdminGuard] },
  { path: 'users', loadChildren: './pages-users/pages-users.module#PagesUsersModule', canActivate: [AuthGuard] },
  { path: '', loadChildren: './auth/auth.module#AuthModule', canActivate: [HomeGuard] },
  { path: '**', component: HomeComponent, canActivate:[HomeGuard] }

];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

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';

import { RouterModule } from '@angular/router';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

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

I can explain it more, but that post was the code i put to solve it — Rinzler21, Apr 20 '20 at 20:33

Angular Component from a shared module not being recognised in Angular 9

3 Answers3