Question

我在代码中加载文件时遇到以下错误：

(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: 'src/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',
            'jquery': 'npm:jquery/',
            'lodash': 'npm:lodash/lodash.js',
            'moment': 'npm:moment/',
            'ng2-bootstrap': 'npm:ng2-bootstrap',
            'ng2-slim-loading-bar': 'npm:ng2-slim-loading-bar',
            'symbol-observable': 'npm:symbol-observable'
        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            app: {
                main: './main',
                defaultExtension: 'js'
            },
            rxjs: {
                defaultExtension: 'js'
            },
            'angular-in-memory-web-api': {
                main: './index.js',
                defaultExtension: 'js'
            },
            'moment': { main: 'moment.js', defaultExtension: 'js' },
            'ng2-bootstrap': { main: 'ng2-bootstrap.js', defaultExtension: 'js' },
            'ng2-slim-loading-bar': { main: 'index.js', defaultExtension: 'js' },
            'symbol-observable': { main: 'index.js', defaultExtension: 'js' }
        }
    });
})(this);

并拥有这样的app.component.ts：

import { Component, OnInit, ViewContainerRef } from '@angular/core';
// Add the RxJS Observable operators we need in this app.
import './rxjs-operators';

@Component({
    moduleId: module.id,
    selector: 'scheduler',
    templateUrl: 'app.component.html'
})
export class AppComponent {

    constructor(private viewContainerRef: ViewContainerRef) {
        // You need this small hack in order to catch application root view container ref
        this.viewContainerRef = viewContainerRef;
    }
}

并拥有这样的main.ts文件：

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

platformBrowserDynamic().bootstrapModule(AppModule);

和pakages.json我喜欢这个：

{
  "version": "1.0.0",
  "name": "scheduler",
  "author": "Chris Sakellarios",
  "license": "MIT",
  "repository": "https://github.com/chsakell/angular2-features",
  "private": true,
  "dependencies": {
    "@angular/common": "~2.1.0",
    "@angular/compiler": "~2.1.0",
    "@angular/core": "~2.1.0",
    "@angular/forms": "~2.1.0",
    "@angular/http": "~2.1.0",
    "@angular/platform-browser": "~2.1.0",
    "@angular/platform-browser-dynamic": "~2.1.0",
    "@angular/router": "~3.1.0",
    "@angular/upgrade": "~2.1.0",
    "angular-in-memory-web-api": "~0.1.5",
    "bootstrap": "^3.3.6",
    "core-js": "^2.4.1",
    "jquery": "^3.0.0",
    "lodash": "^4.13.1",
    "moment": "^2.13.0",
    "ng2-bootstrap": "^1.3.0",
    "ng2-slim-loading-bar": "1.5.1",
    "reflect-metadata": "^0.1.8",
    "rxjs": "5.0.0-beta.12",
    "systemjs": "0.19.39",
    "zone.js": "^0.6.25"
  },
  "devDependencies": {
    "concurrently": "^3.0.0",
    "gulp": "3.9.1",
    "gulp-replace": "0.5.4",
    "del": "2.2.2",
    "gulp-sourcemaps": "2.2.0",
    "jquery": "^3.0.0",
    "lite-server": "^2.2.0",
    "typescript": "2.0.2",
    "typings": "^1.3.2",
    "tslint": "^3.10.2"
  },
  "scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite --baseDir ./app --port 8000\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
  }
}

错误图片我尝试了在关注流程中提到的所有解决方案，但我无法解决此问题，bower组件和node_modules已经设置并拥有所有文件。请查看您的响应。

提前感谢。

Answer 1

我在这个问题上花了好几个小时，最后通过更改主要部分的system.config.js中的行修复了这个问题

 map: {
            // our app is within the app folder
            app: 'src/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',
            'jquery': 'npm:jquery/',
            'lodash': 'npm:lodash/lodash.js',
            'moment': 'npm:moment/',

             // the line that changed:
            'ng2-bootstrap': 'npm:ng2-bootstrap/bundles/ng2-bootstrap.umd.js', 
            'ng2-slim-loading-bar': 'npm:ng2-slim-loading-bar',
            'symbol-observable': 'npm:symbol-observable'
        },

angular2出错：（SystemJS）XHR错误（404 Not Found）loading http：// localhost：3000 / traceur

1 个答案: