Visual Studio 2017 中的 Angular2：运行错误（找不到资源）答案

【问题标题】：Angular2 in visual studio 2017 : run error (Resource not found)Visual Studio 2017 中的 Angular2：运行错误（找不到资源）
【发布时间】：2018-05-02 16:13:47
【问题描述】：

我关注了这个：https://www.codeproject.com/Articles/1181888/Angular-in-ASP-NET-MVC-Web-API-Part

错误：

我的网址 - - - > http://localhost/home

“/”应用程序中的服务器错误。

找不到资源。

描述：HTTP 404。您正在寻找的资源（或其之一依赖项）可能已被删除，名称已更改，或者是暂时不可用。请查看以下 URL 并制作确保拼写正确。

请求的网址：/home

版本信息：Microsoft .NET Framework 版本：4.0.30319； ASP.NET 版本：4.7.2110.0

systemjs.config.js

(function (global) {
System.config({
    paths: {
        // paths serve as alias
        'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
        // our app is within the app folder
        'app': 'app',

        // angular bundles
        '@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',

        // other libraries
        'rxjs': 'npm:rxjs',
        'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
        app: {
            main: 'main.js',
            defaultExtension: 'js'                
        },
        rxjs: {
            defaultExtension: 'js'
        }
    }
});
})(this);

应用组件

import { Component } from "@angular/core"

@Component({
    selector: "user-app",
    template: `
               <div>
                  <nav class='navbar navbar-inverse'>
                       <div class='container-fluid'>
                         <ul class='nav navbar-nav'>
                           <li><a [routerLink]="['home']">Home</a></li>
                      </ul>
                      </div>
                 </nav>    
              <div class='container'>
                <router-outlet></router-outlet>
              </div>
             </div>          
`
})

export class AppComponent {

}

app.routing

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './Components/home.component';

const appRoutes: Routes = [
    { path: '', redirectTo: 'home', pathMatch: 'full' },
    { path: 'home', component: HomeComponent }
];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

app.module

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';



platformBrowserDynamic().bootstrapModule(AppModule);

_layout.cshtml

<!DOCTYPE html>
<html>
<head>
    <base href="/" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    <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>
    <script src="/systemjs.config.js"></script>
    <script src="../node_modules/angular2/bundles/router.dev.js"></script>
    <script>
   System.import('app/main.js').catch(function(err){ console.error(err); });
    </script>
</head>
<body>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

需要帮助

【问题讨论】：

标签： visual-studio angular2-routing angular2-forms

【解决方案1】：

代码中没有问题。都好。我请求的网址有误。

system.config.js 中还有一个小改动

我们需要使用'npm:': '/node_modules/'而不是'npm:': 'node_modules/'

【讨论】：

【解决方案2】：

在您的 systemjs.config.js 中将 'npm:': 'node_modules/' 更改为 'npm:': '/node_modules/'

【讨论】：