Angular8：嵌套延迟加载不适用于cordova 9答案

【问题标题】：Angular8: Nested Lazy loading not working with cordova 9Angular8：嵌套延迟加载不适用于cordova 9
【发布时间】：2020-11-09 12:31:17
【问题描述】：

我有一个使用 Angular 开发的应用程序。它使用延迟加载。它在网络上运行良好。最近，我将 Angular 项目更新为 Angular 8 并进行了生产构建，并使用该 dist 作为 www 构建 Cordova 应用程序。当我们启动应用程序时，它会显示一个白页。

它有两层路由

两个级别都有<router-outlet ></router-outlet>

我尝试使用确切的 Angular 8 示例在 Cordova 9 中运行 https://stackblitz.com/edit/angular-nested-routing-with-modules-with-bootstrap?embed=1&file=src/index.html

app-routing.module.ts

    //app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';
import { ProfileComponent } from './profile/profile.component';
import { AttendanceComponent } from './attendance/attendance.component';
import { Page404Component } from './page404/page404.component';

const routes: Routes = [
    { path: 'leaves', loadChildren: () => import(`./leaves/leaves.module`).then(m => m.LeavesModule) , },
    { path: 'leaves', redirectTo: 'dashboard', pathMatch: 'full' },
    { path: '**', component: Page404Component },
];
@NgModule({
    imports: [
        RouterModule.forRoot(routes,{ enableTracing: false })
    ],
    exports: [RouterModule]
})
export class AppRoutingModule { }

leaves-routing.module.ts

//leaves-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ApplyComponent } from './apply/apply.component';
import { LeavesComponent } from './leaves.component';
import { Page404leavesComponent } from './page404leaves/page404leaves.component';


const routes: Routes = [
  {
    path: '', component: LeavesComponent, children: [
      {
        path: 'apply', component: ApplyComponent
      },
 
      {
        path: '', redirectTo: 'apply', pathMatch: 'full'
      },
      { path: '**', component: Page404leavesComponent }
    ]
  }
];

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

package.json

{
  "name": "web",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~8.2.14",
    "@angular/cdk": "^10.0.2",
    "@angular/common": "~8.2.14",
    "@angular/compiler": "~8.2.14",
    "@angular/core": "~8.2.14",
    "@angular/forms": "~8.2.14",
    "@angular/platform-browser": "~8.2.14",
    "@angular/platform-browser-dynamic": "~8.2.14",
    "@angular/router": "~8.2.14",
    "rxjs": "~6.4.0",
    "tslib": "^1.10.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.803.28",
    "@angular/cli": "~8.3.28",
    "@angular/compiler-cli": "~8.2.14",
    "@angular/language-service": "~8.2.14",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~7.0.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.5.3"
  }
}

当我们通过控制台调试 Cordova 应用程序时，出现大量错误。

Failed to load resource: The requested URL was not found on this server.file:///private/var/containers/Bundle/Application/18A12E91-7FEE-437A-8218-C72D98382451/UPay%20Dev.app/www/polyfills-es2015.ffa9bb4e015925544f91.js

【问题讨论】：

标签： angular cordova angular8 cordova9

【解决方案1】：

经过一些变通方法后，我发现了动态路由的问题

我之前用于动态加载模块的是

{ path: 'leaves', loadChildren: () => import(`./leaves/leaves.module`).then(m => m.LeavesModule) , }

应该如下所示进行更改

{ path: 'leaves', loadChildren: () => import('./leaves/leaves.module').then(m => m.LeavesModule) , }

使用单引号插入反引号

我认为这会对某人有所帮助

【讨论】：