如何让ng build跳过对base.jinja2文件的错误检查？

遇到过类似的场景，当把Angular CLI配置里的index文件换成Jinja2模板时，Angular会误把模板里的{{ ... }}语法当成自己的插值绑定，从而抛出未定义变量的错误。下面是几个实用的解决方法，你可以根据自己的项目情况选择：

方案1：静态资源复制+构建后替换（简单易上手） #

这个方法的核心是让Angular把base.jinja2当成纯静态资源复制，构建完成后再替换成dist目录的入口文件：

• 第一步：打开项目根目录的angular.json（旧版CLI是angular-cli.json），找到对应项目的build配置，在assets数组里添加base.jinja2：

  "assets": [
    "src/favicon.ico",
    "src/assets",
    "src/base.jinja2"
  ]
  

• 第二步：保持index配置项为原来的index.html（如果已经改成base.jinja2，改回来就行）。
• 第三步：在package.json的scripts里添加一个构建后脚本，自动完成文件替换：

  "scripts": {
    "build": "ng build",
    "postbuild": "cp dist/你的项目名称/base.jinja2 dist/你的项目名称/index.html"
  }
  

  之后执行npm run build，构建完成后就会自动把base.jinja2替换成dist里的入口文件，Angular也不会解析里面的Jinja2语法了。

方案2：自定义Webpack配置（更灵活） #

如果你的项目需要更灵活的构建控制，可以用自定义Webpack配置来直接复制并替换入口文件：

• 首先安装依赖：

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

• 修改angular.json的build配置，使用custom-webpack构建器：

  "architect": {
    "build": {
      "builder": "@angular-builders/custom-webpack:browser",
      "options": {
        "customWebpackConfig": {
          "path": "./webpack.custom.config.js"
        },
        // 保留其他原有配置，index暂时设为默认的index.html
        "index": "src/index.html"
      }
    }
  }
  

• 创建webpack.custom.config.js文件，添加复制规则：

  const CopyPlugin = require('copy-webpack-plugin');
  
  module.exports = {
    plugins: [
      new CopyPlugin({
        patterns: [
          {
            from: 'src/base.jinja2',
            to: 'index.html',
            toType: 'file'
          }
        ]
      })
    ]
  };
  

  这样构建时Webpack会自动把base.jinja2复制成dist目录下的index.html，完全跳过Angular的模板解析逻辑。

方案3：修改Angular插值分隔符（不推荐，适合新项目） #

如果你的项目还处于初期，代码量不大，可以修改Angular的默认插值语法，和Jinja2的{{ ... }}区分开：

• 在根模块（比如AppModule）中添加自定义插值的提供者：

  import { NgModule, InjectionToken } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { AppComponent } from './app.component';
  
  export const APP_INTERPOLATION = new InjectionToken<string[]>('APP_INTERPOLATION');
  
  @NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule],
    providers: [
      {
        provide: APP_INTERPOLATION,
        useValue: ['[[', ']]'] // 把Angular的插值改成[[...]]
      }
    ],
    bootstrap: [AppComponent]
  })
  export class AppModule {}
  

• 然后在main.ts中使用这个自定义分隔符启动应用：

  import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  import { AppModule } from './app/app.module';
  import { APP_INTERPOLATION } from './app/app.module';
  
  platformBrowserDynamic([{ provide: APP_INTERPOLATION, useValue: ['[[', ']]'] }])
    .bootstrapModule(AppModule)
    .catch(err => console.error(err));
  

  这个方法需要你把所有Angular组件里的{{ ... }}替换成[[ ... ]]，所以适合新项目，旧项目改造成本较高。

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