导入到 Angular5 中的延迟加载模块
Import into lazy loaded module in Angular5
尝试将一些组件分组到延迟加载模块中并遇到 material 导入问题:
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!)
大多数 material 组件(例如 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
]
感谢之前的思路,通过以下方式解决:
import {MatCheckboxModule, MAT_CHECKBOX_CLICK_ACTION} from '@angular/material/checkbox';
...
{provide: MAT_CHECKBOX_CLICK_ACTION, useValue: 'check'},
尝试将一些组件分组到延迟加载模块中并遇到 material 导入问题:
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!)
大多数 material 组件(例如 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
]
感谢之前的思路,通过以下方式解决:
import {MatCheckboxModule, MAT_CHECKBOX_CLICK_ACTION} from '@angular/material/checkbox';
...
{provide: MAT_CHECKBOX_CLICK_ACTION, useValue: 'check'},