Angular 如何将懒加载模块排除在生产构建之外？

我明白你想把演示用的DevShowcaseModule从生产构建中彻底移除，避免终端用户访问到，同时防止演示代码引发生产环境错误。你之前尝试的tsconfig.json排除方法无效，其实是因为Angular CLI的构建逻辑和TypeScript编译配置是分开的——tsconfig.json的exclude只是告诉TypeScript编译器忽略这些文件，但CLI在打包时仍会扫描整个src目录，懒加载的模块依然会被包含进去，路由也能正常访问。

下面是几种可靠的实现方法，按推荐程度排序：

方法1：结合环境变量控制路由注册 + Angular CLI生产构建排除文件夹 #

这是最彻底的方案，既不会在生产环境注册路由，也不会把演示代码打包进去。

步骤1：添加环境标志 #

在src/environments/environment.ts（开发环境）中添加：

export const environment = {
  production: false,
  showDevShowcase: true // 开发环境启用演示模块
};

在src/environments/environment.prod.ts（生产环境）中添加：

export const environment = {
  production: true,
  showDevShowcase: false // 生产环境禁用演示模块
};

步骤2：条件化配置路由 #

修改app-routing.module.ts，根据环境变量决定是否添加演示模块的路由：

import { environment } from '../environments/environment';

const routes: Routes = [
  // 你的其他路由配置...
  
  // 仅在开发环境添加演示路由
  ...(environment.showDevShowcase ? [
    { 
      path: APP_NAV_ITEMS.DEV_SHOWCASE, 
      canActivate: [ AuthGuard ], 
      loadChildren: './_dev-showcase/dev-showcase.module#DevShowcaseModule'
    }
  ] : [])
];

步骤3：在Angular CLI配置中排除演示文件夹 #

打开angular.json，找到你的项目配置，在architect -> build -> configurations -> production -> options下添加exclude数组：

"projects": {
  "your-project-name": {
    "architect": {
      "build": {
        "configurations": {
          "production": {
            "options": {
              // 其他生产构建配置...
              "exclude": [
                "src/app/_dev-showcase/**/*"
              ]
            }
          }
        }
      }
    }
  }
}

这样生产构建时，CLI会直接跳过演示文件夹的所有文件，不会打包进最终产物。

方法2：添加专属守卫阻止生产环境访问 #

如果暂时不想修改路由配置，可以添加一个守卫，确保只有开发环境能访问演示模块：

步骤1：创建DevShowcaseGuard #

import { Injectable } from '@angular/core';
import { CanActivate } from '@angular/router';
import { environment } from '../environments/environment';

@Injectable()
export class DevShowcaseGuard implements CanActivate {
  canActivate(): boolean {
    // 仅开发环境允许访问
    return environment.showDevShowcase;
  }
}

步骤2：更新路由配置 #

在演示模块的路由中添加这个守卫：

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

这种方法虽然不会移除打包的代码，但能阻止终端用户访问演示页面，适合快速临时解决问题。

为什么tsconfig.json的exclude无效？ #

再补充解释一下：tsconfig.json的exclude属性是给TypeScript编译器用的，它只会影响编译阶段是否生成这些文件的.js产物，但Angular CLI在构建时会自己扫描src目录下的所有文件（除非你在angular.json中配置排除），所以懒加载的模块依然会被打包进生产构建，路由也能正常匹配。

内容的提问来源于stack exchange，提问作者Webworx23