导入Angular5中的延迟加载模块

Question

试图将一些组件分组到延迟加载模块中，并在材料导入方面遇到问题：

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!)

大多数材料组件(如垫子复选框(都会出现相同的错误，但例如，它与垫子图标配合良好

#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>

我有以下应用程序的架构：

• app.module以非惰性方式导入dashboard.module
• dashboard.module以惰性方式导入test.module
• test.module有一个组件，上面描述了错误

这是什么类型的问题？我是不是错过了一些重要的东西？在这种情况下，在子模块中进行延迟加载可以吗？

编辑：

#app.module.ts(简化了应用程序模块(

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

#模块.ts(简化的仪表板模块(

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

#模块.ts(简化测试模块(

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

Answer 1

模块中似乎缺少提供程序。将MAT_CHECKBOX_CLICK_ACTION添加到您的应用程序模块：

providers: [
...,
MAT_CHECKBOX_CLICK_ACTION
]

或MatCheckboxModule到您的应用程序模块：

imports: [
...,
MatCheckboxModule
]

Answer 2

感谢之前的想法，通过以下方式解决：

import {MatCheckboxModule, MAT_CHECKBOX_CLICK_ACTION} from '@angular/material/checkbox';
...
{provide: MAT_CHECKBOX_CLICK_ACTION, useValue: 'check'},