如何使用 angular-router-loader 加载子异步

Question

我的文件夹结构如下：

 - app
   -core
   -vacancy

在core文件夹中，我有app.routing.ts ，我想在其中异步添加路由到空缺。

我这样做是这样的：

export const routing = RouterModule.forRoot([
        {
            path: '',
            component: HomeComponent,
            canActivate: [AuthGuard]
        },
        {
            path: 'vacancy',
            loadChildren: '../vacancy#VacancyModule'
        },
        {
            path: '**',
            component: NotFoundComponent
        }
    ], {useHash: true}
);

我得到一个错误：

无法解决'..\空缺'

尽管文件夹app中存在文件夹空缺，并且在空缺内有一个文件vacancy.module.ts ，它看起来像：

// some imports here
@NgModule({
    declarations: [
        VacancyBaseComponent
    ],
    imports: [
        CommonModule,
        FormsModule,
        RouterModule.forChild(routes),
    ],
})

export class VacancyModule {
    public static routes = routes;
}

任何想法我做错了什么？

Answer 1

有点晚了。 如果您还没有弄清楚，请尝试以下操作：

loadChildren: 'app/vacancy/vacancy.module#VacancyModule'

Answer 2

UPD：实际时间2022-12-26

在 Angular 版本 8 中，loadChildren 路由规范的字符串语法已弃用，取而代之的是import()语法。 您可以通过在 tsconfig 文件中包含延迟加载的路由来选择使用基于字符串的延迟加载 ( loadChildren: './path/to/module#Module' )，该文件在编译中包含延迟加载的文件。

默认情况下，Angular CLI 生成的项目具有更严格的文件包含，旨在与 import() 语法一起使用。

https://angular.io/guide/lazy-loading-ngmodules#create-a-feature-module-with-routing