未捕获的ReferenceError：未定义系统 - Angular2

Question

The index.html page loads on the screen and shows loading. index.html页面加载到屏幕上并显示加载。 However I don't see the text "My First Component " which i have defined in the template attribute of app.component.ts. 但是，我没有看到我在app.component.ts的模板属性中定义的文本“我的第一个组件”。 When I do a F12 to open up developer tools , I see error: 当我使用F12打开开发人员工具时，我看到错误：

Uncaught ReferenceError: System is not defined. 未捕获的ReferenceError：未定义系统。

It points to the first line in the app.component.js file. 它指向app.component.js文件中的第一行。 Can somebody tell me what the problem is ? 有人能告诉我问题是什么吗？

app.component.ts app.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'pm-app',
    template: `
    <div>
        <h1>{{pageTitle}}</h1>
         <div> My First Component </div>
     </div>
     `

})

export class AppComponent {
    pageTitle: string = 'Hello World'; 
}

tsconfig.json tsconfig.json

{
  "compilerOptions": {
    "target": "ES5",
    "module": "system",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "removeComments": false,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  },
  "exclude": [
    "node_modules"
  ]
}

index.html 的index.html

<!DOCTYPE html>
<html>

<head>
    <title>Angular 2 Application</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="app/app.component.css" rel="stylesheet" />

    <!-- 1. Load libraries -->
    <!-- IE required polyfills, in this exact order -->



    <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/rxjs/bundles/Rx.umd.js"></script>
    <script src="node_modules/@angular/core/core.umd.js"></script>
    <script src="node_modules/@angular/common/common.umd.js"></script>
    <script src="node_modules/@angular/compiler/compiler.umd.js"></script>
    <script src="node_modules/@angular/platform-browser/platform-browser.umd.js"></script>
    <script src="node_modules/@angular/platform-browser-dynamic/platform-browser-dynamic.umd.js"></script>

    <script src='app/app.component.js'></script>
    <script src='app/main.js'></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script> 
    <!-- 2. Configure SystemJS -->
    <script>
        System.config({
        packages: {
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });
      System.import('app/main')
            .then(null, console.error.bind(console));
    </script>
</head>

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

</html>

main.ts main.ts

import { bootstrap } from '@angular/platform-browser-dynamic';

// Our main component
import { AppComponent } from './app.component';

bootstrap(AppComponent);

Answer 1

Try moving 试着移动

<script src="node_modules/systemjs/dist/system.src.js"></script>

above your rxjs script declaration 在您的rxjs脚本声明之上

Answer 2

Check the latest (RC1) quick start app: https://angular.io/guide/quickstart (A link to working plunker ) 检查最新的（RC1）快速启动应用程序： https ： //angular.io/guide/quickstart （ 工作plunker的链接）

The index.html is now simplified index.html现在已经简化了

  <head>
    <title>Angular 2 QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">

    <!-- 1. Load libraries -->
     <!-- Polyfill(s) for older browsers -->
    <script src="https://npmcdn.com/es6-shim@0.35.0/es6-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>

    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>

And many settings are moved to systemjs.config.js 许多设置都移动到systemjs.config.js

/**
 * PLUNKER VERSION (based on systemjs.config.js in angular.io)
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function(global) {

  var ngVer = '@2.0.0-rc.1'; // lock in the angular package version; do not let it float to current!

  //map tells the System loader where to look for things
  var  map = {
    'app':                        'app',

    '@angular':                   'https://npmcdn.com/@angular', // sufficient if we didn't pin the version
    'angular2-in-memory-web-api': 'https://npmcdn.com/angular2-in-memory-web-api', // get latest
    'rxjs':                       'https://npmcdn.com/rxjs@5.0.0-beta.6',
    'ts':                         'https://npmcdn.com/plugin-typescript@4.0.10/lib/plugin.js',
    'typescript':                 'https://npmcdn.com/typescript@1.8.10/lib/typescript.js',
 };

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

  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];

  // Add map entries for each angular package
  // only because we're pinning the version with `ngVer`.
  ngPackageNames.forEach(function(pkgName) {
    map['@angular/'+pkgName] = 'https://npmcdn.com/@angular/' + pkgName + ngVer;
  });

  // Add package entries for angular packages
  ngPackageNames.forEach(function(pkgName) {

    // Bundled (~40 requests):
    packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };

    // Individual files (~300 requests):
    //packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
  });

  var config = {
    // DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
    transpiler: 'typescript',
    typescriptOptions: {
      emitDecoratorMetadata: true
    },

    map: map,
    packages: packages
  }

  System.config(config);

})(this);

A link to fully working plunker could be found here , all details - https://angular.io/guide/quickstart 这里可以找到完整工作的plunker的链接，所有细节 - https://angular.io/guide/quickstart

未捕获的ReferenceError：未定义系统 - Angular2

问题描述

2 个解决方案

解决方案1
4 已采纳 2016-05-16 20:09:47

解决方案2
2 2016-05-16 16:09:04

未捕获的ReferenceError：未定义系统 - Angular2

问题描述

2 个解决方案

解决方案1 4 已采纳 2016-05-16 20:09:47

解决方案2 2 2016-05-16 16:09:04

解决方案1
4 已采纳 2016-05-16 20:09:47

解决方案2
2 2016-05-16 16:09:04