.NET MVC项目集成Angular5：组件无法加载问题求助

Problem Description #

I'm trying to integrate Angular 5 into a .NET MVC Web API project, but I've run into multiple roadblocks despite trying several approaches. Here's what I've done so far:

• Cloned the latest Angular 5 project from GitHub locally
• Created a new .NET project with MVC and WebAPI in Visual Studio 2015
• Copied the Angular project's package.json to the .NET project root, then restored packages to generate node_modules
• Copied over tsconfig.app.json, main.ts, and the entire app folder into the .NET project and included them in the solution

First Issue: Build Error #

Initially, I hit this build error:

tsc : error TS5023: Build:Unknown compiler option 'lib'

Here's my tsconfig.json configuration:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  }
}

Updated Issue (2018-02-02) #

I've fixed the build error, but now Angular components won't load, and I'm seeing errors in the browser console (screenshot attached: Angular Component Loading Failure Console Error). I need help resolving this.

Solutions & Troubleshooting Steps #

1. Fixing the TS5023 Build Error #

The lib compiler option was introduced in TypeScript 2.0, but Visual Studio 2015 ships with an older version of TypeScript (typically v1.8) by default. Here's how to fix it:

• Open the NuGet Package Manager in Visual Studio, search for Microsoft.TypeScript.MSBuild, and install a version compatible with Angular 5 (v2.4 or higher – v2.8.x works well with VS 2015)
• Alternatively, edit your .csproj file to update the TypeScript version reference, ensuring it points to the newer compiler installed on your machine

2. Resolving Component Loading Failures #

Now that the build works, let's tackle the component loading issue with these common fixes:

Check Angular Bootstrap Logic

Make sure main.ts has the correct bootstrapping code:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

Verify Script References in Your Main View

Ensure your index.cshtml (or root MVC view) includes all required Angular dependencies and points to the correct paths:

<!-- Core JS dependencies -->
<script src="~/node_modules/core-js/client/shim.min.js"></script>
<script src="~/node_modules/zone.js/dist/zone.js"></script>
<script src="~/node_modules/systemjs/dist/system.src.js"></script>

<!-- SystemJS config -->
<script src="~/systemjs.config.js"></script>

<!-- Bootstrap Angular -->
<script>
  System.import('main.js').catch(err => console.error(err));
</script>

Correct SystemJS Configuration (If Using SystemJS)

Your systemjs.config.js needs proper mappings for Angular modules. Here's a minimal working example:

(function (global) {
  System.config({
    paths: {
      'npm:': 'node_modules/'
    },
    map: {
      app: 'app',
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
      'rxjs': 'npm:rxjs'
    },
    packages: {
      app: {
        main: './main.js',
        defaultExtension: 'js'
      },
      rxjs: {
        defaultExtension: 'js'
      }
    }
  });
})(this);

Fix Static File Access in .NET

Ensure your web.config allows access to static files like JS and JSON:

<system.webServer>
  <staticContent>
    <mimeMap fileExtension=".json" mimeType="application/json" />
    <mimeMap fileExtension=".js" mimeType="application/javascript" />
  </staticContent>
</system.webServer>

Confirm TypeScript Output Path

Update your tsconfig.json to specify an output directory for compiled JS files, making sure it's accessible to your MVC project:

{
  "compilerOptions": {
    // Existing config...
    "outDir": "./wwwroot/dist"
  }
}

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