Angular - 如何从产品构建中排除延迟加载的模块？答案

【问题标题】：Angular - How to exclude a lazy loaded module from prod build?Angular - 如何从产品构建中排除延迟加载的模块？
【发布时间】：2019-09-27 06:36:25
【问题描述】：

我有一个用于演示目的的角度模块 (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/*"

  ]
}

知道如何正确地做到这一点吗？

谢谢！

【问题讨论】：

要么动态构建路由，要么使用路由保护来保护开发路由。
使用angular.io/api/router/CanLoad
CanLoad - 决定是否可以延迟加载模块，控制是否可以加载路由。这对于延迟加载的功能模块很有用。如果守卫返回 false，它们甚至不会加载。
@ritaj 嗨，谢谢。我看到了那个解决方案，但是如果我通过路由执行，DevShowcaseModule 代码是否包含在产品构建中？我希望将 DevShowcaseModule 及其组件从产品构建代码中完全删除。
@Webworx23 我猜你指定的方法只在 Angular 4 之前有效。迁移到 angular 6 后，TS 似乎会构建它看到“import”语句的任何文件，无论它是否位于 tsconfig.json 的“exclude”属性中。如上所述，控制导入似乎是唯一可行的选择

标签： angular angular-cli production angular-cli-v7

【解决方案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，这正是我计划做的，基于上述 cmets 的建议。太棒了，这真是太棒了。非常感谢您提供完整的代码 sn-p！我明天试试……
你好 yurzui，我找到了一种更简单的方法来达到同样的效果。但是代码更少，其他开发人员更容易理解。我已经更新了你的答案。如果是错误的方式或位置，请纠正我。
我认为在您的示例中，第一次运行 cli 将无法找到惰性模块，因此它不会被捆绑，因为它应该被静态分析。但是在重新加载时（只要您进行任何更改）它将起作用monosnap.com/file/dg1ijVIWo1MhrrCUgzUgRm0fW1rzD2
谢谢。没错，我的第一个测试就像你描述的那样工作。但在我的第二次测试中，我根本无法将 DemoModule 加载到开发中。而且我真的很想了解为什么它在一次重新加载后工作一次，然后甚至在几次重新加载后根本没有工作。

【解决方案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 {
}

【讨论】：