InjectionToken mat-select-scroll-strategy error with angular material lazy loading problem

Question

i have two modules in my angular 9 app only one module uses angular material. so my app.module.ts don't load it, i use lazy loading but when i run the app it shows an error

NullInjectorError: R3InjectorError(t)[InjectionToken mat-select-scroll-strategy -> InjectionToken mat-select-scroll-strategy -> InjectionToken mat-select-scroll-strategy -> InjectionToken mat-select-scroll-strategy]: NullInjectorError: No provider for InjectionToken mat-select-scroll-strategy!

some one help please.

Answer 1

I faced the same situation. What solves me is to import MatAutocompleteModule in app.module.ts even you need it in submodules.

app.module.ts

import {MatAutocompleteModule} from '@angular/material/autocomplete';


imports: [
  MatAutocompleteModule,
]

Answer 2

What removed the error for me, was including MatDialogModule and MatMenuModule in the AppModule, which isn't lazy-loaded:

import { MatDialogModule } from '@angular/material/dialog';
import { MatMenuModule } from '@angular/material/menu';

Then finally the mat-menu worked again!

Why does this work?

My guess is that some @angular/material components have some implicit dependencies on those 2 specific modules. Hopefully they fix it in the future, so you don't need this...

Answer 3

In my case, there was a routing error. In the parent path using lazy loading, I have placed the bookmarks component. In the morning I also referred to the same component with tabs.

Parent:

{
    path: MyProfileRoutesEnum.settings,
    data: {[MY_DATA_PARAM]: true},
    component: MySettingsContainerComponent, // need to delete this
    loadChildren: () => import('./my-settings/my-settings.module').then((m) => m.MySettingsModule),
},

Child:

{
    path: `:${TAB_PARAM}`,
    component: MySettingsContainerComponent,
},

Must be parent:

{
    path: MyProfileRoutesEnum.settings,
    data: {[MY_DATA_PARAM]: true},
    loadChildren: () => import('./my-settings/my-settings.module').then((m) => m.MySettingsModule),
},