Angular 6 结合ASP.NET MVC5生产构建报错，求解决方案

Let's break down the possible issues you're facing when running ng build --prod --aot=true and how to fix them, based on your configuration files.

First: Check Build-Time Errors (If the ng build Command Fails) #

If the build itself is failing, these are the most common culprits:

1. Lazy-Loaded Module Setup #

Your routing uses a lazy-loaded ContactModule, which needs to be properly configured for AOT:

• Make sure the ContactModule has its own routing module (e.g., ContactRoutingModule) with defined routes for its components.
• Ensure all components in the module are declared in the declarations array of ContactModule.
• Example ContactModule structure:

  import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { ContactRoutingModule } from './contact-routing.module';
  import { ContactComponent } from './contact.component';
  
  @NgModule({
    declarations: [ContactComponent],
    imports: [CommonModule, ContactRoutingModule]
  })
  export class ContactModule { }
  

• And the corresponding routing module:

  import { NgModule } from '@angular/core';
  import { Routes, RouterModule } from '@angular/router';
  import { ContactComponent } from './contact.component';
  
  const routes: Routes = [{ path: '', component: ContactComponent }];
  
  @NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
  })
  export class ContactRoutingModule { }
  

2. AOT-Incompatible Code #

AOT is strict about code that can't be statically analyzed. Look for these issues:

• Function calls in templates: Replace {{ getDynamicValue() }} with property bindings (e.g., {{ dynamicValue }}).
• Missing decorators: Ensure all services have @Injectable(), components have @Component, and modules have @NgModule.
• Template syntax errors: Fix typos, missing closing tags, or invalid property bindings in your component templates.
• Dynamic component creation: If you're creating components on the fly, make sure you're using ComponentFactoryResolver correctly (AOT doesn't support runtime compilation by default).

Next: Fix Runtime Issues (If Build Succeeds But App Doesn't Run) #

If the build completes but your MVC-integrated app breaks, check these integration problems:

1. Stop Double-Minifying Angular Files #

Angular's production build already outputs minified, optimized code. ASP.NET's ScriptBundle automatically applies minification again, which can break the AOT-compiled code. Switch to a plain Bundle instead:

// Update BundleConfig.cs
bundles.Add(new Bundle("~/Script/Bundles").Include(
    "~/Bundles/runtime.*",
    "~/Bundles/polyfills.*",
    "~/Bundles/scripts.*",
    "~/Bundles/vendor.*",
    "~/Bundles/main.*"));

bundles.Add(new Bundle("~/Content/Styles").Include(
    "~/Bundles/styles.*"));

This will concatenate the files without re-minifying them.

2. Verify Script Loading Order #

Angular requires scripts to load in this exact order:
runtime.js → polyfills.js → scripts.js → vendor.js → main.js
Your current BundleConfig lists them correctly, but confirm ASP.NET isn't reordering them (it should respect the order you specify).

3. Remove Duplicate Scripts #

Check if scripts like jQuery or Bootstrap are loaded twice: once in Angular's scripts array (in angular.json) and once in your MVC layout or another bundle. Duplicates can cause conflicts and errors.

4. Confirm Base Href #

The <base href="/"> in your _Layout.cshtml is correct if your app runs at the root URL. If your MVC app is hosted in a subdirectory (e.g., http://localhost/MyApp), update it to <base href="/MyApp/">.

5. Validate Build Output #

After running ng build --prod --aot=true, check the Bundles folder to ensure it has all required files:

• runtime.[hash].js
• polyfills.[hash].js
• scripts.[hash].js
• vendor.[hash].js
• main.[hash].js
• styles.[hash].css

Quick Testing Tips #

• Test Angular standalone: Run ng serve --prod --aot=true to see if the app works on its own. If it does, the problem is in the MVC integration.
• Check CLI output: When running the build command, look for specific error messages in the console—they'll tell you exactly what's broken (e.g., a missing module or template error).
• Use generated index.html: As a test, replace your MVC view's content with the index.html file generated in the Bundles folder. If the app works, the issue is in how you're integrating scripts/styles into your layout.

内容的提问来源于stack exchange，提问作者Thiem Tuan Le