Angular 5.1.3部署Azure App Service失败求助：CLI版本不兼容

Let's break down your issue and fix it step by step:

Core Problem Analysis #

Your error messages point to two key issues:

1. Angular 5+ requires at least @angular/cli 1.5+, but your package.json doesn't include this dependency.
2. The deployment script is trying to use ng build --prod (a CLI-only command), but your project is an ASP.NET Core + Angular 5 project with manual Webpack configuration (evidenced by boot.browser.ts, boot.server.ts, and the Webpack build command in your error logs). This mismatch is causing the AOT build to fail, hence the missing ngfactory files.

Step 1: Add Required Dependencies #

First, add a compatible @angular/cli version to your devDependencies (Angular 5 works best with CLI 1.6.x, which meets the 1.5+ requirement). Update your package.json's devDependencies section:

"devDependencies": {
  "@angular/cli": "~1.6.8",
  "@angular/compiler-cli": "^5.1.3",
  "@types/chai": "^4.1.0",
  "@types/jasmine": "^2.8.3",
  "jasmine-core": "^2.8.0",
  "karma": "^2.0.0",
  "karma-chai": "^0.1.0",
  "karma-chrome-launcher": "^2.2.0",
  "karma-cli": "^1.0.1",
  "karma-jasmine": "^1.1.1",
  "karma-webpack": "^2.0.8"
}

Your existing @ngtools/webpack@1.9.3 is compatible with CLI 1.6.x, so no changes needed there.

Step 2: Fix the Deployment Script's Build Command #

Your project uses Webpack directly, not the Angular CLI. Replace the incorrect ng build step in your deployment script with the Webpack production build command:

# 4. Webpack Production Build (replaces the Angular CLI build step)
if [ -e "$DEPLOYMENT_TARGET/webpack.config.js" ]; then
  cd "$DEPLOYMENT_TARGET"
  eval $NODE_EXE node_modules/webpack/bin/webpack.js --env.prod
  exitWithMessageOnError "Webpack production build failed"
  cd - > /dev/null
fi

This matches the build command that's failing in your error logs (node node_modules/webpack/bin/webpack.js --env.prod), ensuring consistency between local and Azure builds.

Step 3: Verify AOT Configuration #

Double-check your Webpack and TypeScript configs to ensure AOT is set up correctly:

1. Webpack Config: Confirm the @ngtools/webpack plugin is configured for AOT:

const ngToolsWebpack = require('@ngtools/webpack');

module.exports = {
  // ... other config
  plugins: [
    new ngToolsWebpack.AngularCompilerPlugin({
      tsConfigPath: './tsconfig.json',
      entryModule: './ClientApp/app/app.browser.module#AppBrowserModule',
      sourceMap: true
    }),
    // ... other plugins
  ]
};

2. tsconfig.json: Ensure AOT-related settings are present:

{
  "compilerOptions": {
    "module": "es2015",
    "target": "es5",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    // ... your existing options
  },
  "angularCompilerOptions": {
    "genDir": "$$_gendir",
    "skipMetadataEmit": true
  }
}

The genDir value matches the path in your error messages, so the build will generate files in the correct location.

Step 4: Validate Local Build & Azure Node Version #

1. Test Locally: Delete node_modules and package-lock.json, run npm install, then execute webpack --env.prod to confirm the build works locally before pushing to GitHub.
2. Azure Node Version: Angular 5 requires Node.js 8.x or higher. In the Azure Portal, go to your App Service > Configuration > General settings, and set the Node.js version to 8.x or 10.x (both are compatible with Angular 5).

Extra Optimization #

You can simplify the npm install step in your deployment script by replacing the two separate install commands with a single one:

eval $NPM_CMD install

This ensures all dependencies (prod and dev) are installed, which is necessary for Webpack and the Angular compiler to run.

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