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：系统未定义”

回答

相关问题