Angular项目编译报错：Module parse failed，求有效解决方法

针对你遇到的Module parse failed: Unexpected character '�'错误，这是因为Angular未正确配置处理图片类静态资源的规则，以下是几种有效的解决方法：

方法1：遵循Angular静态资源规范（推荐） #

• 将src/app/css/img文件夹移动到src/assets目录下，调整为src/assets/img
• 修改CSS中的图片引用路径，比如原本的url('./img/mini-logo.png')，根据CSS文件层级调整为url('../../assets/img/mini-logo.png')
• 重新运行ng serve，Angular CLI会自动处理assets目录下的静态资源，无需额外配置loader

方法2：修改angular.json配置静态资源目录 #

若不想移动图片位置，可直接在angular.json中将目标目录列为静态资源：

1. 打开项目根目录的angular.json文件
2. 找到architect -> build -> options -> assets数组，添加"src/app/css/img"：

   "assets": [
     "src/favicon.ico",
     "src/assets",
     "src/app/css/img"
   ]
   

3. 检查CSS中的图片引用路径是否正确，确保能指向该目录下的图片
4. 重启开发服务器生效

方法3：使用自定义Webpack配置（适合复杂场景） #

若上述方法无效，可通过自定义Webpack配置添加图片处理loader：

1. 安装自定义Webpack构建器：

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

2. 修改angular.json中的构建配置，替换默认构建器：
   • 将architect -> build -> builder改为@angular-builders/custom-webpack:browser
   • 将architect -> serve -> builder改为@angular-builders/custom-webpack:dev-server
   • 在build -> options中添加自定义配置项：

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

3. 在项目根目录创建webpack.config.js，添加图片处理规则：

   module.exports = {
     module: {
       rules: [
         {
           test: /\.(png|jpe?g|gif)$/i,
           use: [
             {
               loader: 'file-loader',
               options: {
                 outputPath: 'assets/img',
                 name: '[name].[ext]'
               }
             }
           ]
         }
       ]
     }
   };
   

4. 重启开发服务器，Webpack会通过file-loader处理图片文件

注意：直接手动添加webpack.config.js而不修改Angular CLI的构建器配置是无效的，默认Angular CLI不会读取该文件。

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