Uncaught ReferenceError: System не определен - Angular2

На странице index.html загружается экран и отображается загрузка. Однако я не вижу текст «Мой первый компонент», который я определил в атрибуте шаблона app.component.ts. Когда я делаю F12, чтобы открыть инструменты разработчика, я вижу ошибку:Uncaught ReferenceError: System не определен - Angular2

Uncaught ReferenceError: System is not defined.

Это указывает на первой линии в app.component.js файле. Может кто-нибудь сказать мне, в чем проблема?

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

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

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

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

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

bootstrap(AppComponent);

источник

2016-05-16 Tom

Попробуйте переставить

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

над вашим rxjs декларация сценария

источник

2016-05-16 20:09:47 vidalsasoon

Проверить последнюю (RC1) быстрый запуск приложения: https://angular.io/guide/quickstart(Ссылка на working plunker)

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/[email protected]/es6-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> 

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

И многие настройки перенесены на 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/[email protected]', 
    'ts':       'https://npmcdn.com/[email protected]/lib/plugin.js', 
    'typescript':     'https://npmcdn.com/[email protected]/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);

Ссылка на полностью рабочий plunker можно найти here, все детали - https://angular.io/guide/quickstart

источник

2016-05-16 16:09:04

Я обновил мой index.html и добавлен файл system.config.js в соответствии с вашим ответом. К сожалению, сейчас мой проект даже не построен. Я получаю ошибки сборки Ошибка сборки: Дублировать идентификатор «PropertyKey». Есть еще много таких ошибок. – Tom

Изменение, которое вы должны сделать, должно полностью соответствовать последним настройкам @ @ localular RC, а не только некоторым из RC, а остальное - BETA. Я бы предложил, откройте ссылку, которую я дал вам последнему и работающему плункеру ... и файл по файлу переместите его в локальное решение ... он будет работать;) –

Uncaught ReferenceError: System не определен - Angular2

ответ

Смежные вопросы