web-dev-qa-db-fra.com

angularjs: Uncaught Referenceerror: Le système n'est pas défini

Je suis nouveau à angular alors aidez s'il vous plaît. Je reçois une erreur en essayant d'exécuter un code simple avec angular avec la balise angular ng-controller où j'affiche une variable en HTML définie dans un fichier javascript comme:

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

et en affichant en HTML comme dans: page HTML

L'erreur sur la console chrome est la suivante:

Uncaught ReferenceError: le système n'est pas défini (fonction anonyme) @ angular2.js: 3098

qui pointe vers une fonction dans angular2js:

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

Je ne comprends pas le problème. Est-ce lié au angular2.js que j'ai inclus dans angularjs.org?

javascriptangular
14
Harshvardhan Solanki

Essayez d'inclure le fichier System JS dans votre code HTML.

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

Consultez ce dépôt Github pour obtenir de l'aide: https://github.com/kensplanet/angularjs2-hello-world/blob/master/index.html

Angular2 façon de le faire

Lien Plunker: 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);

Sortie:

Bonjour dur

9
kensplanet

J'ai eu le même problème dans Angular 2.0 avec TypeScript.

Im mon problème, je demandais l'URL avec une barre oblique supplémentaire '/' like ' http: // localhost: 3000/login/ ' (une barre oblique supplémentaire après 'login')

2
Sajin M Aboobakkar

L'utilisation de https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.7/angular2-all.umd.js a permis de supprimer cette erreur. Pas de system js externe nécessaire.

0
Shankar Gurav

Cela peut sembler évident, mais assurez-vous que vous avez exécuté: 

npm install

remplir le répertoire node_modules dans le répertoire racine de votre application. En particulier vous avez besoin de:

node_modules/systemjs/dist/system.src.js
0
vt5491

J'ai récemment rencontré le même problème en suivant le tutoriel sur PluralSight et en utilisant Plunker. J'ai résolu le problème en utilisant ce script

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

au lieu de cela:

<script src="https://code.angularjs.org/2.0.0-snapshot/angular2.js" data-require="angular.js@*" data-semver="2.0.0"></script>
0
Nate