相关疑难解决方法(0)

我想使用延迟加载,但我不明白为什么它不起作用,它给我错误"找不到模块".
这是我的环境:
- Angular 5.2.1
- .NET Core 2
- Webpack 3.10.0
- angular-router-loader 0.8.2
- @ angular/cli 1.6.5
我在loadChildren尝试了不同的路径总是没有成功,我也暂时禁用所有警卫和儿童路线.我做错了什么？

FOLDERS

ClientApp
  app
    components
      users
        users-routing.module.ts
        users.module.ts
  app-routing.module.ts
  app.module.shared.ts

APP-routing.module.ts

const appRoutes: Routes = [
    {
        path: 'users',
        loadChildren: './components/users/users.module#UsersModule'/* ,
        canLoad: [AuthGuard] */
    },
    {
        path: '',
        redirectTo: '/login',
        pathMatch: 'full'
    },
    {
        path: '**',
        redirectTo: '/login'
    }
];

@NgModule({
    imports: [
        RouterModule.forRoot(
            appRoutes,
            { enableTracing: false }
        )
    ],
    exports: [
        RouterModule
    ],
    providers: [
        CanDeactivateGuard
    ]
}) …

构建angular5应用程序.该应用程序需要一些备用布局.

我的方法是处理主app模块路由文件中的高级路由.所述文件将路由映射到模块.对于非必要的速度驱动页面,模块将延迟加载,而不是为速度关键页面延迟加载:

app-layout-router.module.ts 文件:

import {NgModule} from '@angular/core';
import {PreloadAllModules, RouterModule, Routes} from '@angular/router';
import {PublicLayoutModule} from '@modules/layouts/public/public-layout.module';
import {AuthenticatedLayoutModule} from '@modules/layouts/authenticated/authenticated-layout.module';

const routes: Routes = [{
    path: '',
    loadChildren: () => PublicLayoutModule,
},{
    path: 'dashboard',
    loadChildren: () => AuthenticatedLayoutModule,
}];

@NgModule({
    imports: [RouterModule.forRoot(
        routes,
        {
            useHash: false,
            preloadingStrategy: PreloadAllModules
        }
    )],
    exports: [RouterModule],
})

export class AppLayoutRouter {
}

不在仪表板下的所有路线都将根据SEO原因进行预渲染.但是,在经过身份验证的布局中,我可以选择通过延迟加载后续模块来中断应用程序.例如,这是经过身份验证的模块路由器文件的内容:

import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {AuthenticatedLayoutComponent} from './authenticated-layout.component';

const routes: Routes = [{
    path: …

我正在尝试让延迟加载在我的angular 5应用程序上工作，但是我的简单测试似乎无法正常工作。

"devDependencies": {
    "@angular/cli": "^1.7.4", 
    "@angular/compiler-cli": "^5.0.0",
    "@angular/language-service": "^5.0.0",

（使用cli 1.7.4-基于延迟加载Angular 5错误：$$ _ lazy_route_resource延迟递归）

问题是只有我的部分路线（而非全部）实际产生“模板”结果。我已经向构造函数添加了console.log，并且与未显示的模板和未记录的控制台有100％的相关性。

我从公共文件夹中的一堆组件开始，然后是一个“ public.module”。但是将所有路由都放在一个public.module中并没有给我我想要的延迟加载。因此，我将每个组件都移到了自己的目录中，该目录具有处理其子路由的模块。

这就是这种行为开始的时间-随机“不渲染”。

在我拥有的12个组件中，有2个将其模板呈现到屏幕上，其余的则没有。我已经将代码缩减为两个模块-其余的都是相同的，在尝试加载任何特定于模块的模块之前，我试图使其完全起作用。

任何帮助是极大的赞赏。

应用结构：

app
|- components
|---|- public
|---|---|- home
|---|---|---|- home.component.ts (this displays "home works", and console.logs)
|---|---|---|- home.module.ts
|---|---|- about
|---|---|---|- about.component.ts (this DOES NOT work, and displays nothing)
|---|---|---|- about.module.ts
|- app.module.ts
|- app.component.ts
|- app.routing.module.ts
|- app.component.html

app.module.ts

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