升级Angular与Webpack后AngularCompilerPlugin未找到错误求助

嘿，我帮你梳理下这个问题——你碰到的The AngularCompilerPlugin was not found错误，核心原因是服务端打包配置里漏掉了AngularCompilerPlugin插件。你只在客户端生产环境的plugins里加了这个插件，但服务端入口boot.server.ts同样用了@ngtools/webpack loader，这个loader必须和AngularCompilerPlugin配套使用才能正常工作。而且你贴的服务端webpack配置代码明显不完整（最后一行停在so），这肯定也导致了配置缺失。

下面是具体的修复步骤，一步步来：

1. 补全服务端webpack配置的AngularCompilerPlugin #

修改你的serverBundleConfig部分，给它加上AngularCompilerPlugin，注意要指定服务端专属的entryModule：

// Configuration for server-side (prerendering) bundle suitable for running in Node
const serverBundleConfig = merge(sharedConfig, {
    resolve: { mainFields: ['main'] },
    entry: { 'main-server': './ClientApp/boot.server.ts' },
    target: 'node', // 服务端打包必须指定target为node
    output: {
        filename: '[name].js',
        libraryTarget: 'commonjs2' // 适配Node环境的输出格式
    },
    plugins: [
        new webpack.DllReferencePlugin({
            context: __dirname,
            manifest: require('./ClientApp/dist/vendor-manifest.json'),
            // 补全你之前没写完的DllReferencePlugin配置项，比如name等
        }),
        // 新增服务端的AngularCompilerPlugin
        new AngularCompilerPlugin({
            tsConfigPath: './tsconfig.json',
            entryModule: path.join(__dirname, 'ClientApp/app/app.server.module#AppModule'),
            exclude: ['./**/*.browser.ts'] // 排除客户端代码
        })
    ]
});

2. 检查tsconfig.json的关键配置 #

确保你的tsconfig.json里启用了Angular编译器的必要设置，尤其是Angular 6还不支持Ivy，必须禁用：

{
  "compilerOptions": {
    "module": "esnext",
    "target": "es2017",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "skipLibCheck": true,
    "strict": true
  },
  "angularCompilerOptions": {
    "enableIvy": false,
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

3. 彻底重置依赖（避免缓存残留） #

之前你清理过缓存，但可能不够彻底，试试完全重置依赖：

# 删除node_modules和锁文件
rm -rf node_modules package-lock.json yarn.lock
# 重新安装依赖
npm install

4. 确保ts loader的纯净性 #

你的package.json里还装了awesome-typescript-loader，但@ngtools/webpack需要独占TypeScript的编译流程，所以要确保webpack里的ts规则只使用@ngtools/webpack，不要混合其他ts loader：

module: {
  rules: [
    { 
      test: /\.ts$/, 
      loaders: ['@ngtools/webpack'],
      exclude: [/\.(spec|e2e)\.ts$/] // 排除测试文件
    },
    // 其他loader配置保持不变
  ]
}

额外提醒 #

• 客户端开发环境如果不需要AOT可以暂时不加AngularCompilerPlugin，但如果要开启AOT模式，同样需要在开发环境的plugins里添加它
• 要确认你的AppServerModule在代码里是正确导出的，并且entryModule里的路径和文件名完全匹配

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