使用Angular CLI构建应用时如何跳过指定文件？

我之前刚好处理过类似从原生Webpack切换到Angular CLI的项目，而且也是同时作为NPM和Maven项目部署在WildFly上，分享下我的实际操作步骤和注意点：

1. 初始化CLI核心配置 #

先在现有项目根目录执行以下命令，生成CLI所需的配置文件但不覆盖现有代码：

ng new . --skip-install --skip-git

这会创建angular.json、tsconfig.json等核心配置文件。接下来需要对照原有Webpack的配置，调整angular.json里的关键项：

• 修改outputPath为你之前Webpack的输出目录（如果不是默认的dist/）
• 在assets数组里添加原有项目的静态资源路径
• 把原有全局样式、脚本路径配置到styles和scripts数组中
• 配置configurations里的生产/开发环境变量，对应原有项目的环境配置

2. 打通NPM与Maven的构建流程 #

因为你的项目同时是NPM和Maven项目，需要让两者的构建流程协同起来：

• 在package.json里添加CLI构建脚本：

  "scripts": {
    "build:prod": "ng build --configuration production",
    "build:dev": "ng build --configuration development"
  }
  

• 在Maven的pom.xml中配置frontend-maven-plugin，让Maven自动执行前端构建：

  <plugin>
    <groupId>com.github.eirslett</groupId>
    <artifactId>frontend-maven-plugin</artifactId>
    <version>1.12.1</version>
    <executions>
      <execution>
        <id>install node and npm</id>
        <goals>
          <goal>install-node-and-npm</goal>
        </goals>
        <configuration>
          <nodeVersion>v20.9.0</nodeVersion> <!-- 替换成你项目用的Node版本 -->
        </configuration>
      </execution>
      <execution>
        <id>npm install</id>
        <goals>
          <goal>npm</goal>
        </goals>
        <configuration>
          <arguments>install</arguments>
        </configuration>
      </execution>
      <execution>
        <id>npm build</id>
        <goals>
          <goal>npm</goal>
        </goals>
        <configuration>
          <arguments>run build:prod</arguments>
        </configuration>
      </execution>
    </executions>
  </plugin>
  

  同时配置maven-war-plugin，把CLI构建生成的dist/目录内容复制到WAR包的根目录：

  <plugin>
    <groupId>org.apache.maven.plugins</groupId>
    <artifactId>maven-war-plugin</artifactId>
    <version>3.3.2</version>
    <configuration>
      <webResources>
        <resource>
          <directory>${project.basedir}/dist/your-app-name</directory> <!-- 替换成你的CLI输出目录 -->
          <targetPath>/</targetPath>
        </resource>
      </webResources>
    </configuration>
  </plugin>
  

3. 适配WildFly的部署要求 #

WildFly部署前端项目有几个关键注意点：

• 如果你的Angular用了PathLocationStrategy（非哈希路由），需要在web.xml里配置重写规则，把所有404请求转发到index.html：

  <error-page>
    <error-code>404</error-code>
    <location>/index.html</location>
  </error-page>
  

• 构建时要指定正确的baseHref，对应WildFly部署的上下文路径，比如：

  ng build --configuration production --base-href=/your-wildfly-context/
  

• 确保WildFly的静态资源缓存策略和Angular的文件哈希命名兼容，CLI默认会给构建产物加上哈希后缀，避免缓存问题，这一点不需要额外调整。

4. 迁移原有Webpack的自定义配置 #

如果原有Webpack有一些CLI不支持的自定义配置（比如特殊loader、插件），可以用@angular-builders/custom-webpack来扩展CLI：

• 安装依赖：

  npm install @angular-builders/custom-webpack --save-dev
  

• 修改angular.json里的构建配置，指定自定义Webpack配置文件：

  "architect": {
    "build": {
      "builder": "@angular-builders/custom-webpack:browser",
      "options": {
        "customWebpackConfig": {
          "path": "./webpack.custom.config.js"
        },
        // 其他原有配置...
      }
    }
  }
  

• 在webpack.custom.config.js里迁移原有Webpack的特殊配置，比如额外的插件或loader。

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