Angular-如何从产品构建中排除懒惰的模块

Question

i具有用于演示目的的角模块(DevShowCaseModule(。该模块不应包含在生产构建中。为了向终结者隐藏此演示并防止制作中的演示代码错误。

环境：

• 角版：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/*"
  ]
}

任何想法如何正确地做到这一点？

谢谢！

Answer 1

我认为您可以利用CLI FileReplacements功能：

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仅在DEV模式下将DemoModule捆绑。

Answer 2

这是另一个可能的解决方案。产品模式正常。
唯一的缺点是，NG发出后未加载Demodole。它需要更改代码才能启动编译器，然后加载了Demodule。

有没有机会加载懒惰的装置，而无需更改代码？

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 {
}