Angular - 如何在生产构建中排除懒加载模块？

Question

我有一个用于演示目的的Angular模块（DevShowcaseModule）。这个模块不应该包含在生产构建中。为了隐藏这些演示内容，防止在生产环境中出现演示代码错误。

环境:

• Angular版本: 7.2.5
• Angular CLI: 7.3.2

这是我的app-routing.module.ts文件

{
    path: APP_NAV_ITEMS.DEV_SHOWCASE,
    canActivate: [ AuthGuard ],
    loadChildren: './_dev-showcase/dev-showcase.module#DevShowcaseModule',
}

我试图在tsconfig.json中排除模块文件夹，但它没有生效，我仍然可以调用路由并加载演示模块。

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "importHelpers": true,
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,

    "noUnusedLocals": true,
    "noUnusedParameters": true,

    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "exclude": [
    "app/_dev-showcase/*"

  ]
}

有什么正确的方法来做这件事吗？

谢谢！

- Webworx23

---

可以动态构建路由，也可以使用路由守卫来保护开发路由。 - Roberto Zvjerković

请使用 https://angular.io/api/router/CanLoad。 - Joel Joseph

CanLoad - 决定是否可以惰性加载模块，控制路由是否可以被加载。这对于惰性加载的特性模块非常有用。如果守卫返回false，则它们甚至不会加载。 - Joel Joseph

哦，我明白了，如果你不想使用代码，可以使用这个解决方案：https://hackernoon.com/conditional-module-imports-in-angular-518294aa4cc - Joel Joseph

@Webworx23，你指定的方法只适用于 Angular 4，我猜测。在迁移到 Angular 6 后，TS 似乎会构建任何包含“import”语句的文件，而不管它是否在 tsconfig.json 的“exclude”属性中。控制导入似乎是唯一可行的选项，正如我上面提到的。 - Joel Joseph

Answer 1

我认为您可以利用CLI文件替换功能，如下所示：

angular.json

"configurations": {
  "production": {
    "fileReplacements": [
      ...
      {
        "replace": "src/app/demo.routes.ts",
        "with": "src/app/demo.routes.prod.ts"
      }
    ],

demo.routes.ts

import { Routes } from '@angular/router';

export const demoRoutes: Routes = [
  {
    path: 'demo',
    loadChildren: './demo/demo.module#DemoModule'
  }
];

demo.routes.prod.ts

export const demoRoutes = [];

根路由器配置应该如下所示：

import { demoRoutes } from './demo.routes';

RouterModule.forRoot([
  {
    path: '',
    component: HomeComponent
  },
  ...demoRoutes
])

使用这种方法，CLI 只会在开发模式下捆绑 DemoModule。

- yurzui

---

你好yurzui，这正是我计划根据上面评论的建议要做的事情。太棒了，这真的很好。非常感谢您提供完整的代码片段！我明天会试一下... - Webworx23

你好yurzui，我找到了一种更简单的方法来实现相同的结果。但是代码更少，其他开发人员更容易理解。我已经更新了你的答案。如果有错误的话请纠正我。 - Webworx23

我认为在你的例子中，在第一次运行时，cli将无法找到lazy模块，因此它不会被捆绑，因为它应该是静态分析的。但是在重新加载（一旦您进行任何更改）后，它将起作用 https://monosnap.com/file/dg1ijVIWo1MhrrCUgzUgRm0fW1rzD2 - yurzui

谢谢。没错，我的第一个测试就像你描述的那样成功了。但是在我的第二个测试中，我无法在dev中加载DemoModule。我真的很想知道为什么它在重新加载一次后能够工作，然后即使重新加载几次也完全不能工作。 - Webworx23

Answer 2

这是另一个可能的解决方案。PROD模式运行良好。
唯一的缺点是，在ng serve之后未加载DemoModule。 需要进行代码更改以启动编译器，然后加载DemoModule。

有没有可能在不进行代码更改的情况下加载延迟加载的DemoModule？

if(!environment.production) {
    console.log('Application is running in dev mode');
    routes.unshift(
        {
            path: APP_NAV_ITEMS.DEV_SHOWCASE,
            canActivate: [ AuthGuard ],
            loadChildren: './_demo/demo.module#DemoModule',
        },
    )
}else{
    console.log('Application is running in production mode');
}

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

- Webworx23