Question

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

错误：

我的网址 - - - ＆gt; http://localhost/home

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

无法找到资源。

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

请求的网址：/ 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);

appcomponent

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>

需要支持

Answer 1

代码中没有问题。都好。我正在请求一个错误的网址。

system.config.js中的一个小变化

我们需要使用＆＃39; npm：＆＃39;：＆＃39; / node_modules /＆，而不是＆nbsp;＆nbsp;＆＃39; node_modules /＆＃39; ＃39;

Answer 2

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

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

2 个答案: