1

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

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

我不知道为什么，我从我的 systemjs.config.js 中删除了评论并用谷歌搜索了大约 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>

索引.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'
    };
}

最后是我的项目结构

在此处输入图像描述

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

4

2 回答 2

0

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

从

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

至

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

看看这是否有帮助。

于 2016-08-27T15:35:43.830 回答
0

从开发者控制台检查堆栈跟踪，可能文件有多行注释。这使得 traceur 一直在调用（traceur 是一个转译器）。

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

于 2016-11-30T20:34:19.643 回答