Angular2 systemjs.config.js'「ReferenceError：系統未定義」

我已閱讀所有其他文章與此相同的問題，但尚未能夠解決問題。Angular2 systemjs.config.js'「ReferenceError：系統未定義」

如果我在瀏覽器中編譯爲javascript，我會得到@ angular/http和@ angular/core的兩個404錯誤。

當我設置的配置文件先transpile，我得到一個編譯錯誤system.config.js：

「的ReferenceError：系統沒有定義」，在這條線

var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;

我開始從快速入門指南和Tour of Heros Http示例中獲得該項目。

將我的所有文件與快速啓動中的文件進行比較後，我將快速啓動文件複製到我的項目中。

我敢肯定我錯過了一些基本的東西，但已經到了死衚衕。供參考：我是Angular和Angular2的新手。使用WebStorm開發和編譯。

這裏是index.html，然後systemjs.config.js

//system.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.js', defaultExtension: 'js' }, 
 
     '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);

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <title>Generic Form</title> 
 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 

 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css"> 
 
    <link rel="stylesheet" href="styles.css"> 
 
    <link rel="stylesheet" href="forms.css"> 
 

 
    <!-- Polyfill(s) for older browsers --> 
 
    <script src="https://npmcdn.com/core-js/client/shim.min.js"></script> 
 
    <script src="https://npmcdn.com/[email protected]?main=browser"></script> 
 
    <script src="https://npmcdn.com/[email protected]"></script> 
 
    <script src="https://npmcdn.com/[email protected]/dist/system.src.js"></script> 
 
    <script src="systemjs.config.js"></script> 
 

 
    <script> 
 
     System.import('app').catch(function(err){ console.error(err); }); 
 
    </script> 
 
    </head> 
 

 
    <body> 
 
    <my-app>Loading...</my-app> 
 
    </body> 
 

 
</html>

編輯：這是我的HTTP-service.component.ts文件的地步，我收到了404錯誤：

import { Injectable } from '@angular2/core'; 
import { Http, Response } from '@angular2/http'; 
import { Headers, RequestOptions } from '@angular2/http'; 
import { Observable } from 'rxjs/Observable';

請讓我知道其他文件會有什麼幫助。我感謝任何見解！

來源

2016-06-27 saka

你看到目錄中的JS文件？你如何建立這個項目？ – Avi

我可以在node_modules/@ angular文件夾中看到http和core。 – saka

我正在使用SystemJS來捆綁東西，我只是（建設？）從WebStorm運行它 – saka

當前角度2使用「@angular」，而不是什麼測試版本使用「angular2」

import { Injectable } from '@angular/core'; 
import { Http, Response } from '@angular/http'; 
import { Headers, RequestOptions } from '@angular/http'; 
import { Observable } from 'rxjs/Observable';

來源

2016-06-27 19:28:40

Angular2 systemjs.config.js'「ReferenceError：系統未定義」

回答

相關問題