javascript - Angular2 systemjs.config.js ' "引用错误 : System is not defined"

标签 javascript typescript angular

我已阅读所有其他涉及此相同问题的帖子,但未能解决该问题。

如果我在浏览器中编译为 javascript,我会收到 @angular/http 和 @angular/core 的两个 404 错误。

当我将配置文件设置为首先转译时,我在 system.config.js 中收到编译错误:

此行“ReferenceError:系统未定义”

  var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;

我从快速入门指南和英雄之旅 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/zone.js@0.6.12?main=browser"></script>
    <script src="https://npmcdn.com/reflect-metadata@0.1.3"></script>
    <script src="https://npmcdn.com/systemjs@0.19.27/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';

请让我知道哪些其他文件会有帮助。我很感激任何见解!

最佳答案

当前版本的 Angular 2 使用“@Angular”,而不是 Beta 版使用的“Angular2”

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

关于javascript - Angular2 systemjs.config.js ' "引用错误 : System is not defined",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38060946/

相关文章:

javascript - 从字符串变量导入模块

javascript - 如何链接 eventemitter next 方法?

javascript - 将 Tempo 和 JSON 与 Dribbble API 结合使用

javascript - 使 Javascript 根据用户输入立即/立即可互换

javascript - 从外部 webpack 导入(运行时导入)

typescript - ionic2 .. 类型错误 : Cannot read property 'query' of null

javascript - 根据 Angular 4 中的某些条件,在子级中单击按钮时,从父级中的数组中删除特定的组件实例

javascript - 第二次按钮单击事件后,javascript 函数在 c# 的 asp.net 中不起作用

javascript - 为什么我的 javascript 函数的一部分无法运行,即使它在语法上是正确的?

javascript - 如何更改图像的src