Angular 12 CLI是否支持Pug模板？适配Angular CLI 12的Pug模板可行方案及ng-cli-pug-loader报错问题咨询

嘿，针对你提出的两个问题，结合Angular 12的版本特性和社区实践，我整理了以下实用内容：

一、Angular 12 CLI本身支持Pug吗？ #

答案是不支持。Angular 12的官方CLI仅原生支持HTML作为模板格式，CSS/Sass/Less/Stylus作为样式格式，Pug（原Jade）不在官方原生支持的范围内，必须借助第三方工具实现集成。

二、适配Angular CLI 12的Pug有效解决方案 #

经过社区验证，下面两种方案在Angular 12中兼容性和稳定性都不错：

方案1：自定义Webpack配置（灵活可控） #

通过@angular-builders/custom-webpack扩展CLI的Webpack配置，搭配pug-loader编译Pug文件，步骤如下：

1. 安装依赖：

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

2. 在项目根目录创建custom-webpack.config.js，添加Pug编译规则：

   module.exports = {
     module: {
       rules: [
         {
           test: /\.pug$/,
           use: [
             {
               loader: 'pug-loader',
               options: {
                 pretty: true // 可选：编译后生成格式化HTML，方便调试
               }
             }
           ]
         }
       ]
     }
   };
   

3. 修改angular.json，替换构建和开发服务器的builder：
   • 找到projects -> [你的项目名称] -> architect -> build，将builder改为@angular-builders/custom-webpack:browser，并在options中添加自定义配置路径：

     "builder": "@angular-builders/custom-webpack:browser",
     "options": {
       "customWebpackConfig": {
         "path": "./custom-webpack.config.js"
       },
       // 保留原有其他配置（如outputPath、index、main等）
     }
     

   • 同样修改architect -> serve的builder为@angular-builders/custom-webpack:dev-server，确保开发时也能解析Pug模板。
4. 最后，将组件的模板文件改为.pug，并在组件元数据中指定：

   @Component({
     selector: 'app-root',
     templateUrl: './app.component.pug',
     styleUrls: ['./app.component.css']
   })
   

方案2：使用ng-add-pug-loader（快速集成，无需手动配置） #

这是一个封装好的CLI插件，能一键完成Pug支持的配置，适合不想折腾Webpack的同学：

ng add ng-add-pug-loader

执行这个命令后，它会自动安装所需依赖、修改angular.json配置，你直接就能用.pug作为组件模板了。

三、解决你遇到的ng-cli-pug-loader报错问题 #

你碰到的NG5002: Unexpected character "EOF"错误，大概率是两个原因导致的：

1. Pug模板语法错误：检查第26行附近的代码，看是否有未闭合的标签、错误的缩进（Pug对缩进要求非常严格），或者有没有未转义的{字符（如果有的话，按照提示用{{ '{' }}来转义）。
2. 库的兼容性问题：ng-cli-pug-loader的更新进度可能跟不上Angular 12的版本迭代，导致适配出现问题，这也是更推荐上面两种方案的原因。

如果想继续排查这个报错，可以先简化模板代码，逐步删除部分内容，定位到具体引发错误的代码块。

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