【问题标题】:Uncaught (in promise): ChunkLoadError: Loading chunk xxx-xxx-module failed. Angular 9未捕获(承诺):ChunkLoadError:加载块 xxx-xxx-module 失败。角 9
【发布时间】:2020-09-12 12:53:14
【问题描述】:

Angular 9:延迟加载/路由器无法正常工作


控制台错误信息


路径 URL:/作者

http://local.xxxxx.com/node/190/author

代码

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { AppComponent } from './app/app.component';
import { HomeComponent } from './home/home.component';
import { BlankComponent } from './blank/blank.component';

const childRoutes = [
  {
    path: 'author/preview',
    data: {
      routeLabel: 'preview'
    },
    loadChildren: () => import('./frame/frame.module').then(m => m.FrameModule)
  },
  {
    path: 'author',
    canActivate: [DraftContentGuard, ContentEditorAccessGuard],
    data: {
      routeLabel: 'edit'
    },
    loadChildren: () => import('./frame/frame.module').then(m => m.FrameModule)
  },
];

const routes: Routes = [
  {
    path: ':locale/:type/:contentId',
    component: AppComponent,
    canActivate: [EnabledWebSegmentAccessGuard],
    children: childRoutes
  },
  {path: 'author', component: HomeComponent},
  {path: '', redirectTo: '/author', pathMatch: 'full'},
  {path: '**', component: BlankComponent}
];

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

frame.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { FrameRoutingModule } from './frame-routing.module';
import { FrameComponent } from './frame.component';

@NgModule({
    imports: [
        CommonModule,
        FrameRoutingModule
    ],
    declarations: [FrameComponent]
})

export class FrameModule { }

frame-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { FrameComponent } from './frame.component';


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

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

export class FrameRoutingModule { }


项目结构


我怎么看?

大多数文档、文章、教程都使用不同的本地主机服务器,所以我不确定我的服务器配置是否应该更改以在延迟加载下正常工作。

【问题讨论】:

    标签: angular routes lazy-loading angular9 code-splitting


    【解决方案1】:

    我也遇到了同样的问题。然后我改变了以下

    我不知道这是否是一个正确的程序,但它对我有用

    { path: '<$Path>',loadChildren:() => import('./<$module folder name>/<$YOUR Module name>.module').then(m => m.<$Modulename>)}  
    

    我变成了

    import {<$Modulename>} from '/<$Modulepath>';
    { path: '<$Path>', loadChildren:() => {return <$Modulename>;}  }
    

    【讨论】:

    • 非常感谢您回答我;我不再使用它,所以我无法确认它是否正常工作。我希望这对更多的人有所帮助。
    • 将其更改为建议的方法将删除延迟加载。
    猜你喜欢
    • 2021-08-12
    • 1970-01-01
    • 2021-08-11
    • 2022-10-21
    • 1970-01-01
    • 2017-10-02
    • 2021-12-25
    • 2019-08-16
    • 1970-01-01
    相关资源
    最近更新 更多