angular5 - 导入到Angular5中的延迟加载模块
问题描述
尝试将一些组件分组到延迟加载模块中并遇到材料导入问题:
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 {
}
解决方案
似乎您的模块中缺少提供者。添加MAT_CHECKBOX_CLICK_ACTION
到您的应用模块:
providers: [
...,
MAT_CHECKBOX_CLICK_ACTION
]
或MatCheckboxModule
进入您的应用模块:
imports: [
...,
MatCheckboxModule
]
推荐阅读
- eigen - Eigen:以跨步映射非连续数据
- android - 如何在 Android Studio 中构建本地/主机 OS C++ 单元测试?
- java - 调用 Activity.Recreate() 后维护我的 Activity 后台堆栈的最佳方法是什么?
- vba - 如何使用 MS Access VBA 发送带有 Outlook 附件的 PDF 的电子邮件?
- kotlin - 如何从在kotlin中返回对象的函数中获取值
- terraform - Terraform 部分远程后端不能包含插值?
- neo4j - 我如何在 Neo4j 的表格中自我引用?
- python - 需要连接两个音频数据
- wordpress - Magnolia CMS (5.3) - 用户导出为 CSV 或将 JCR XML 转换为 CSV
- javascript - 每当 iframe src 属性更改时,javascript 将查询参数附加到 iframe src