Question

我试图让Angular2与我的ASP.net Core应用程序一起运行，到目前为止看起来很好，我遇到的唯一问题是当我启动应用程序时出现此错误：

Error: Error: XHR error (404 Not Found) loading http://localhost:51435/traceur(…)

我不知道为什么，我从我的systemjs.config.js删除了评论并用Google搜索了大约1小时，似乎没什么用。也许你们中的一个可以帮助我。

我的package.json

{
  "version": "1.0.0",
  "name": "projecthome",
  "private": true,
  "scripts": {
    "typings": "typings",
    "postinstall": "typings install"
  },
  "dependencies": {
    "@angular/common": "2.0.0-rc.5",
    "@angular/compiler": "2.0.0-rc.5",
    "@angular/compiler-cli": "0.5.0",
    "@angular/core": "2.0.0-rc.5",
    "@angular/forms": "0.3.0",
    "@angular/http": "2.0.0-rc.5",
    "@angular/platform-browser": "2.0.0-rc.5",
    "@angular/platform-browser-dynamic": "2.0.0-rc.5",
    "@angular/router": "3.0.0-rc.1",
    "@angular/upgrade": "2.0.0-rc.5",
    "core-js": "^2.4.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "systemjs": "0.19.27",
    "zone.js": "^0.6.12",
    "angular2-in-memory-web-api": "0.0.17",
    "bootstrap": "^3.3.6",

    "jquery": "2.2.2",
    "font-awesome": "^4.6.3"
     },
 "devDependencies": {
    "gulp": "3.9.1",
    "gulp-typescript": "^2.13.6",
    "typescript": "^1.8.10",
    "typings": "^1.3.2"  
}}

我的_Layout.html

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>@ViewBag.Title</title>

    <base href="/">

    <link href="~/lib/css/bootstrap.css" rel="stylesheet" />
    <link href="~/lib/css/font-awesome.css" rel="stylesheet" />
    @RenderSection("styles", required: false)

    @*Solve IE 11 issues *@
    @*<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>
        <script src="https://npmcdn.com/angular2/es6/dev/src/testing/shims_for_IE.js"></script>*@

    <!-- 1. Load libraries -->
    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>

    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>

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

    <script src="~/lib/js/jquery.js"></script>
    <script src="~/lib/js/bootstrap.js"></script>
</head>
<body>
    <div>
     @RenderBody()
    </div>
    @RenderSection("scripts", required: false)
    <script type="text/javascript">
    @RenderSection("customScript", required: false)
    </script>
</body>
</html>

Index.cshtml

@{
    ViewBag.Title = "ProjectHome";
}

@section styles
{
    <link href="~/lib/css/bootstrap.css" rel="stylesheet" />
    <link href="~/css/site.css" rel="stylesheet" />
}

<projecthome-app>
    <div class="loading">Loading</div>
</projecthome-app>

@section scripts
{

}

@section customScript
{
     System.import('app').catch(console.log.bind(console));
}

systemjs.config.js

(function (global) {
    // map tells the System loader where to look for things
    var map = {
        'app': 'app', // 'dist',
        '@angular': 'node_modules/@angular',
        'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
        'rxjs': 'node_modules/rxjs'
    };
    // packages tells the System loader how to load when no filename and/or no extension
    var packages = {
        'app': { main: 'main.ts', defaultExtension: 'ts' },
        'rxjs': { defaultExtension: 'js' },
        'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
    };
    var ngPackageNames = [
      'common',
      'compiler',
      'core',
      'forms',
      'http',
      'platform-browser',
      'platform-browser-dynamic',
      'router',
      'router-deprecated',
      'upgrade',
    ];
    // Individual files (~300 requests):
    function packIndex(pkgName) {
        packages['@angular/' + pkgName] = { main: 'index.js', defaultExtension: 'js' };
    }
    // Bundled (~40 requests):
    function packUmd(pkgName) {
        packages['@angular/' + pkgName] = { main: 'bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
    }
    // Most environments should use UMD; some (Karma) need the individual index files
    var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
    // Add package entries for angular packages
    ngPackageNames.forEach(setPackageConfig);
    var config = {
        map: map,
        packages: packages
    };
    System.config(config);
})(this);

main.ts

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

platformBrowserDynamic().bootstrapModule(AppModule);

app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';
import { AppComponent }  from './app.component';

@NgModule({
    imports: [
        BrowserModule,
        FormsModule
    ],
    declarations: [
        AppComponent
    ],
    bootstrap: [AppComponent]
})

export class AppModule { }

app.component.ts

import { Component } from '@angular/core';
export class Hero {
    id: number;
    name: string;
}
@Component({
    selector: 'projecthome-app',
    template: '<h1>hello</h1>'
})
export class AppComponent {
    title = 'Tour of Heroes';
    hero: Hero = {
        id: 1,
        name: 'Windstorm'
    };
}

最后是我的项目结构

enter image description here

我的systejs.config.js将被gulp复制到wwwroot / lib / js

Answer 1

在您的systemjs.config.js文件中，尝试更改 -

这

'app': { main: 'main.ts', defaultExtension: 'ts' },

到

'app': { main: 'main.js', defaultExtension: 'js' },

看看这是否有帮助。

Answer 2

检查开发者控制台中的堆栈跟踪，可能是文件有多行注释。那个跟踪者正在调用（traceur是一个转换器）。

尝试在tsconfig.json中配置removeComments：true以进行快速检查

未找到Angular2 + .NETCore 404 / traceur

2 个答案: