导入到Angular5中的延迟加载模块答案

【问题标题】：Import into lazy loaded module in Angular5导入到Angular5中的延迟加载模块
【发布时间】：2020-10-09 21:00:07
【问题描述】：

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

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

大多数材料组件（例如 mat-checkbox）都会出现相同的错误，但例如它与 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>

我有以下应用架构：

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

#module.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 {
}

#module.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 {
}

【问题讨论】：

你能附上你的模块定义吗？
@AlejandroCamba 添加了简化的模块定义，否则这些是巨大的文件，但试图选择核心内容

标签： angular5 lazy-loading

【解决方案1】：

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

providers: [
    ...,
    MAT_CHECKBOX_CLICK_ACTION
]

或MatCheckboxModule 进入您的应用模块：

imports: [
    ...,
    MatCheckboxModule
]

【讨论】：

感谢 Dipen 的想法，但它并没有改变任何东西。我也添加到我的示例代码中。
@jokuja 即使在添加 matcheckboxclickaction 之后它也不起作用？可能是我们遗漏了什么，拥有 MVP 会有所帮助。
添加MAT_CHECKBOX_CLICK_ACTION后，错误变为：error: Error: StaticInjectorError(AppModule)[MatRipple -> InjectionToken mat-ripple-global-options]: StaticInjectorError(Platform: core)[MatRipple -> InjectionToken mat-ripple-global-options]：
@jokija 在这种情况下，您的方法应该是一个接一个地添加缺少的提供程序，直到错误得到解决。您的应用模块似乎缺少一些导入和/或提供程序。
是的，现在这是一个简单的部分，让它工作。非常感谢！但是您知道为什么材料不会自动导入吗？

【解决方案2】：

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

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

...

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

【讨论】：