类型“Promise<typeof PublicModule>”不可分配给类型“LoadChildrenCallback”

Question

我正在角度应用程序中进行延迟加载。但我在 loadChildren 中导入模块时遇到错误。

我正在使用 Angular 13。在 Angular 8 中这很简单，我只需使用字符串导入模块即可。

我也尝试使用字符串导入，但它给出了另一个错误，例如

Type 'String' is not allocateable to type 'LoadChildrenCallback'

以下是代码。

公共路由模块

import {Routes, RouterModule} from '@angular/router'
import {HomeComponent} from "./home/home.component";


const routes: Routes = [
  {path: '', component: HomeComponent}
]

@NgModule({
  imports: [
    RouterModule.forChild(routes)
  ],
  exports: [
    RouterModule
  ]
})

export class PublicRoutingModule {
}

应用程序路由模块

import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {PublicModule} from "../OtherModules/public-module/public.module";

const routes: Routes = [
  {
    path: '/',
    loadChildren: import('../OtherModules/public-module/public.module').then(({PublicModule}) => PublicModule)
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

公共模块

import {CommonModule} from '@angular/common';
import {HomeComponent} from './home/home.component';
import {PublicRoutingModule}from "./public-routing.module";

@NgModule({
  declarations: [
    HomeComponent
  ],
  imports: [
    PublicRoutingModule
  ],
  exports: [
    PublicRoutingModule,
  ]
})
export class PublicModule {
}

应用模块

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';

import {AppRoutingModule} from './app-routing.module';
import {AppComponent} from './app.component';
import {PublicModule} from '../OtherModules/public-module/public.module'

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

谢谢。

Answer 1

我们必须将一个函数传递给 loadChildren。

错误：

loadChildren: import('../OtherModules/public-module/public.module').then(({PublicModule}) => PublicModule)

正确：

loadChildren: () => import('../OtherModules/public-module/public.module').then(({PublicModule}) => PublicModule)

Answer 2

完全支持 ESLint：

import { Type } from '@angular/core';

{
    path: '/',
    loadChildren: (): Promise<Type<PublicModule>> => import('../OtherModules/public-module/public.module').then((module) => module.PublicModule);
}