Import into lazy loaded module in Angular5

Question

Trying to group some components into lazy loading modules and getting an issue with material imports:

error: Error: StaticInjectorError(AppModule)[MatCheckbox -> InjectionToken mat-checkbox-click-action]: 
  StaticInjectorError(Platform: core)[MatCheckbox -> InjectionToken mat-checkbox-click-action]: 
    NullInjectorError: No provider for InjectionToken mat-checkbox-click-action!)

Same error appears for most of material components (e.g. mat-checkbox), but for example it works fine with mat-icon:

#working fine:
<mat-icon>phone</mat-icon>
<mat-slider min="1" max="5" step="0.5" value="1.5"></mat-slider>

#errors:
<mat-slide-toggle>Slide me!</mat-slide-toggle>
<mat-radio-group>
   <mat-radio-button value="2">Option 2</mat-radio-button>
</mat-radio-group>
<mat-checkbox>Hello world</mat-checkbox>

I have following architecture of the app:

app.module imports dashboard.module in non-lazy way
dashboard.module imports test.module in lazy way
test.module has a component with error described above

What type of problem is this? Am I missing some import? Is it OK to have lazy loading in sub-modules as in this case?

EDIT:

#app.module.ts (app module simplified)

import { DashboardModule } from './dashboard/module';
import { AppComponent } from './app.component';
import { RouterModule, Routes, PreloadAllModules } from '@angular/router';
import {MatCheckboxModule} from '@angular/material/checkbox';


const routes: Routes = [
    {
        path: 'dashboard',
        redirectTo: 'dashboard/test',
        pathMatch: 'full',
    }
];

@NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
        RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules }),
        DashboardModule,
        MatCheckboxModule,

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

#module.ts (dashboard module simplified)

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DashboardResolver } from './test/resolver';
import { DashboardComponent } from './test/component';

const dashboardRoutes: Routes = [
    {
        path: 'dashboard',
        component: DashboardComponent,
        children: [
            {
                path: 'test',
                pathMatch: 'full',
                loadChildren: './test/module#DashboardTestModule',
                data: {loginStatusShouldBe: true},
                resolve: {
                    test: DashboardResolver,
            },
        },
        ]
    }
];

@NgModule({
    imports: [
        CommonModule,
        RouterModule.forChild(dashboardRoutes),
    ],
    exports: [
        RouterModule,
    ],
    providers: [
        DashboardResolver,
    ],
export class DashboardModule {
}

#module.ts (test module simplified)

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TestComponent } from './component';
import { RouterModule, Routes } from '@angular/router';

const testRoutes: Routes = [
    {
        path: '',
        component: TestComponent,
    },
];

@NgModule({
    imports: [
        CommonModule,
        RouterModule.forChild(testRoutes),
    ],
    declarations: [
        TestComponent,
    ],
    exports: [
        RouterModule,
    ],
})
export class DashboardTestModule {
}

@AlejandroCamba added simplified modules definitions, otherwise those are huge files but tried to pick core things — jokuja
– jokuja, Commented Oct 7, 2020 at 17:18

Dipen Shah · Accepted Answer · 2020-10-09 00:29:01Z

1

+50

Seems like you are missing provider in your module. Add MAT_CHECKBOX_CLICK_ACTION in to your app module:

providers: [
    ...,
    MAT_CHECKBOX_CLICK_ACTION
]

or MatCheckboxModule in to your app module:

imports: [
    ...,
    MatCheckboxModule
]

edited Oct 9, 2020 at 0:29

answered Oct 9, 2020 at 0:19

Dipen Shah

26.2k1 gold badge37 silver badges61 bronze badges

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

6 Comments

jokuja Over a year ago

Thanks for the idea Dipen but it doesn't change anything. I added to my example code too.

Dipen Shah Over a year ago

@jokuja even after adding matcheckboxclickaction it's not working? May be we are missing something and having MVP would help.

jokuja Over a year ago

When added MAT_CHECKBOX_CLICK_ACTION, error has changed into: error: Error: StaticInjectorError(AppModule)[MatRipple -> InjectionToken mat-ripple-global-options]: StaticInjectorError(Platform: core)[MatRipple -> InjectionToken mat-ripple-global-options]:

Dipen Shah Over a year ago

@jokija In that case your approach should be to add missing providers one after another untill error gets resolved. It looks like your app module is missing few imports and/or providers.

jokuja Over a year ago

Yes this is an easy part now, made it work. Many thanks! But do you have an idea why material doesn't import this automatically?

|

jokuja · Accepted Answer · 2020-10-09 13:00:07Z

0

Thanks to previous idea, resolved in a following way:

 import {MatCheckboxModule, MAT_CHECKBOX_CLICK_ACTION} from '@angular/material/checkbox';

...

 {provide: MAT_CHECKBOX_CLICK_ACTION, useValue: 'check'},

answered Oct 9, 2020 at 13:00

jokuja

892 silver badges15 bronze badges

Collectives™ on Stack Overflow

Import into lazy loaded module in Angular5

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related