Angular2js: Неподготовленная эталонная ошибка: система не определена

Я новичок в angular, поэтому, пожалуйста, помогите. Я получаю сообщение об ошибке при попытке запустить простой код с angular с тегом angular ng-controller, где я показываю переменную в html, определенную в файле javascript, как:

var MainController = function($scope){
$scope.message = "harsh";

и отображение в html, как в этом: html page

Ошибка на консоли хром:

Uncaught ReferenceError: система не определена (анонимная функция) @ angular2.js: 3098

которая указывает на некоторую функцию в угловом 2js:

System.register("angular2/src/core/facade/lang", [], true, function(require, exports, module) {

Я не понимаю проблему. Связано ли это с angular2.js, которое я включил из angularjs.org?

Ответ 1

Попробуйте включить системный JS файл в свой HTML-код.

<script src="https://jspm.io/[email protected]"></script>

Проверьте это репозиторий Github для любой помощи: https://github.com/kensplanet/angularjs2-hello-world/blob/master/index.html

Angular2 способ сделать это

Ссылка на плункер: http://plnkr.co/edit/36PZLTZ58bXmD4me0cpS?p=preview

index.html

<html>
    <head>
        <title>AngularJS2 Hello World Demo</title>

        <script src="https://github.jspm.io/jmcriffey/[email protected]/traceur-runtime.js"></script>
        <script src="https://jspm.io/[email protected]"></script>
        <script src="https://code.angularjs.org/2.0.0-alpha.28/angular2.dev.js"></script>
    </head>

    <body>
        <harsh></harsh>

    <script>
        System.import('harsh');
    </script>
        </body>
</html>

harsh.js

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") return Reflect.decorate(decorators, target, key, desc);
    switch (arguments.length) {
        case 2: return decorators.reduceRight(function(o, d) { return (d && d(o)) || o; }, target);
        case 3: return decorators.reduceRight(function(o, d) { return (d && d(target, key)), void 0; }, void 0);
        case 4: return decorators.reduceRight(function(o, d) { return (d && d(target, key, o)) || o; }, desc);
    }
};
var angular2_1 = require('angular2/angular2');
var angularjs2Component = (function () {
    function angularjs2Component() {
        this.name = "Harsh";
    }
    angularjs2Component = __decorate([
        angular2_1.Component({
            selector: 'harsh'
        }),
        angular2_1.View({
            template: '<h1>Hello {{name}}<h1>'
        })
    ], angularjs2Component);
    return angularjs2Component;
})();
angular2_1.bootstrap(angularjs2Component);

Вывод:

Привет, суровый

Ответ 2

У меня такая же проблема в Angular 2.0 с TypeScript.

Мне моя проблема Я просил URL с дополнительной косой чертой '/' like 'http://localhost:3000/login/' (дополнительный слэш после 'входа ")

Ответ 3

Использование https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.7/angular2-all.umd.js помогло удалить эту ошибку. Не требуется внешний system js.

Ответ 4

Это может показаться очевидным, но убедитесь, что вы запустили:

npm install

чтобы заполнить каталог node_modules в корневом каталоге приложения. В частности, вам необходимо:

node_modules/systemjs/dist/system.src.js

Ответ 5

Недавно я столкнулся с той же проблемой, следуя руководству по PluralSight и используя Plunker. Я решил проблему, используя этот script

<script src="https://code.angularjs.org/1.3.0-beta.5/angular.js" data-semver="1.3.0-beta.5" data-require="[email protected]*"></script>

вместо этого:

<script src="https://code.angularjs.org/2.0.0-snapshot/angular2.js" data-require="[email protected]*" data-semver="2.0.0"></script>

Ответ 6

В случае использования некоторого Seed of AngularJS.

Эти проблемы могут быть, если вы удалите или не включите что-то вроде этого в index.html

  <!-- shims:js -->
  <!-- endinject -->

Иногда разработчики, которые не знакомы с AngularJS 2 и конкретным проектом семени, думают, что они удаляют дополнительные комментарии из HTML и даже не понимают, что это injection.