如何修复Angular+TypeScript自定义Webpack配置的ModuleParseError

一、错误原因分析 #

ModuleParseError: Module parse failed: Unexpected token 通常是Webpack遇到无法解析的语法（比如ESNext特性、CSS/HTML文件、TypeScript装饰器等），但未配置对应loader导致的。结合Angular独立组件场景，常见触发点：

• 未配置TypeScript loader处理.ts/.tsx文件
• CSS/Scss文件未配置css-loader+style-loader（或生产环境的mini-css-extract-plugin）
• TypeScript编译选项未开启Angular独立组件所需的装饰器、元数据支持

二、针对性修复步骤 #

1. 完善Webpack配置的loader规则 #

在webpack.config.js中补充核心loader配置，确保覆盖TypeScript、CSS、HTML文件的解析：

module.exports = {
  module: {
    rules: [
      // 处理TypeScript文件
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
      // 处理CSS文件（支持组件内styleUrl/styleUrls）
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
        // 生产环境可替换为：
        // use: [require('mini-css-extract-plugin').loader, 'css-loader']
      },
      // 处理Angular模板文件
      {
        test: /\.html$/,
        use: 'html-loader',
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  // 其他配置：entry、output、devServer等
};

2. 验证TypeScript编译配置 #

确保tsconfig.json开启Angular独立组件所需的编译选项：

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "node",
    "strict": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "skipLibCheck": true,
    "esModuleInterop": true
  },
  "angularCompilerOptions": {
    "enableIvy": true,
    "standalone": true
  }
}

3. 确保Angular CLI与自定义Webpack的兼容配置 #

检查angular.json，确认使用@angular-builders/custom-webpack作为构建器，避免默认配置冲突：

{
  "projects": {
    "your-project-name": {
      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./webpack.config.js"
            },
            // 其他build选项（如outputPath、index等）
          }
        },
        "serve": {
          "builder": "@angular-builders/custom-webpack:dev-server",
          "options": {
            "browserTarget": "your-project-name:build"
          }
        }
      }
    }
  }
}

三、Angular独立组件+自定义Webpack启动模板 #

以下是完整的最小化可运行项目结构及配置：

项目结构 #

angular-standalone-webpack-starter/
├── src/
│   ├── app/
│   │   ├── app.component.ts
│   │   ├── app.component.html
│   │   └── app.component.css
│   ├── main.ts
│   ├── index.html
│   └── styles.css
├── webpack.config.js
├── tsconfig.json
├── angular.json
└── package.json

核心文件内容 #

1. package.json（依赖清单）

{
  "name": "angular-standalone-webpack-starter",
  "version": "1.0.0",
  "scripts": {
    "start": "ng serve",
    "build": "ng build"
  },
  "dependencies": {
    "@angular/core": "^17.0.0",
    "@angular/common": "^17.0.0",
    "@angular/platform-browser": "^17.0.0",
    "rxjs": "^7.8.0",
    "zone.js": "^0.14.0"
  },
  "devDependencies": {
    "@angular-builders/custom-webpack": "^17.0.0",
    "@angular/cli": "^17.0.0",
    "typescript": "^5.2.0",
    "ts-loader": "^9.5.0",
    "css-loader": "^6.8.0",
    "style-loader": "^3.3.0",
    "html-loader": "^4.2.0",
    "webpack": "^5.89.0"
  }
}

2. main.ts（独立组件启动入口）

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent).catch(err => console.error(err));

3. app.component.ts（独立根组件）

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Angular Standalone Webpack Starter';
}

4. app.component.html

<h1>{{ title }}</h1>
<p>自定义Webpack + 独立组件配置已生效</p>

5. app.component.css

h1 {
  color: #1976d2;
  font-family: Arial, sans-serif;
}

使用步骤 #

1. 初始化项目后执行npm install安装依赖
2. 启动开发服务器：npm start
3. 生产环境构建：npm run build

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