web-dev-qa-db-fra.com

Angular2 5 minute bug d'installation - require n'est pas défini

Je fais le Angular2 5 minute quick start .

À peu près au milieu du didacticiel, les fichiers suivants sont correctement configurés:

  • index.html,
  • app.component.ts
  • app/boot.ts
  • package.json
  • tconfig.json

Ran npm start et j'obtiens cette erreur:

Uncaught ReferenceError: require is not defined(anonymous function) @ boot.js:1 angular2-polyfills.js:143 Uncaught TypeError: Cannot read property 'split' of undefinedreadMemberExpression @ system.src.js:1456(anonymous function) @ system.src.js:3224(anonymous function) @ system.src.js:3749complete @ system.src.js:2487run @ angular2-polyfills.js:138zoneBoundFn @ angular2-polyfills.js:111

J'ai trouvé ce lien sur l'utilisation de l'es6 shim et j'ai inclus <script src="node_modules/es6-shim/es6-shim.js"></script>.

Cependant, je reçois toujours l'erreurUncaught ReferenceError: require is not defined.

app.component.ts

import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }

(app/boot.ts)

import {bootstrap}    from 'angular2/platform/browser'
import {AppComponent} from './app.component'

bootstrap(AppComponent);

index.html

<html>

  <head>
    <title>Angular 2 QuickStart</title>

    <!-- 1. Load libraries -->
    <script src="node_modules/es6-shim/es6-shim.js"></script>
    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>

    <!-- 2. Configure SystemJS -->
    <script>
      System.config({
        packages: {        
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });
      System.import('app/boot')
            .then(null, console.error.bind(console));
    </script>

  </head>

  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>

</html>

package.json

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
  },
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.0",
    "systemjs": "0.19.6",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.0",
    "zone.js": "0.5.10"
  },
  "devDependencies": {
    "concurrently": "^1.0.0",
    "lite-server": "^1.3.1",
    "TypeScript": "^1.7.3"
  }
}

tconfig.json

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

Le compilé app/boot.js

 enter image description here

Dernier journal de npm start

 enter image description here

javascriptangular
24
Leon Gaban

OK, enfin, mon application «de base» au travail.

Premièrement, mon problème était que npm start ne compilait pas mes fichiers TypeScript .ts.

De cet article , j'ai trouvé une réponse ici Impossible de trouver le module externe 'angular2/angular2' - Angular2 w/TypeScript

Je devais exécuter npm install -g tsd@latest pour mettre à jour ma définition TypeScript. Juste après, je devais mettre à jour le fichier TypeScript Definition (TSD) pour Angular2 tsd install angular2.

Après cela, je continuais à recevoir des erreurs de mon fichier boot.js.

Au lieu de cela import {AppComponent} from './app.component'

J'avais besoin de l'écrire comme ceci import {AppComponent} from '../app.component.js'

Maintenant ça marche!https://github.com/leongaban/angular2quickstart

 enter image description here

Un problème gênant est que npm start n'est toujours pas la compilation automatique des fichiers TypeScript. Je dois donc toujours compiler manuellement chaque fichier .ts à la main tsc app.component.ts --module system

11
Leon Gaban

J'ai trouvé que la raison pour laquelle le mien avait provoqué une erreur était due au module défini comme "commonjs" dans mon fichier tsconfig.json , en le changeant en system , corrigé

{
  "compilerOptions": {
        "target": "es5",
        "module": "system",
        "declaration": false,
        "noImplicitAny": false,
        "removeComments": true,
        "noLib": false,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "sourceMap": true
    },
  "exclude": [
    "node_modules"
  ]
}

EDIT Cette réponse était basée sur Angular 2 beta 17. Selon le moment de cette réponse et les rapides changements subis par Angular 2, il est possible que cela ne fonctionne plus.

27
Michael Gikaru

J'ai la même erreur dans la version angular2.beta15.

Je l'ai résolu en enlevant

format: 'register',

hors index.html

<script>
    System.config({
        packages: {
            app: {
                format: 'register',
                defaultExtension: 'js'
            }
        }
    });
</script>
18
Reinhard

J'utilise angular-cli et il utilise maintenant webpack, mais je recevais cette erreur lors du chargement de CSS J'ai ajouté declare let require: any; avant mon composant et maintenant cela fonctionne.

3
Helzgate

Si vous suivez le tutoriel Mise à niveau vers Angular2, cela peut vous mordre:

Assurez-vous de ne pas encore charger manuellement vos fichiers javascript convertis lorsque vous convertissez les fichiers en TypeScript et utilisez les chargeurs de modules pour les charger. 

J'avais converti certains fichiers en TS, mais je chargeais toujours les fichiers JS d'origine (maintenant transpilés) dans le fichier index.html. Si vous faites cela, vous continuerez à obtenir "require n'est pas défini" car la bibliothèque "require" n'a pas encore été chargée. 

Ligne de fond: Donc, si vous obtenez "require n'est pas défini", placez une instruction de débogage avant la ligne incriminée (pour moi, il s'agissait de import {Injectable} à partir de '@ angular/core'), regardez quels fichiers source ont été chargés et assurez-vous de ne pas toujours les charger manuellement.

2
user910531

J'ai eu un problème similaire causé par le fait que je définissais un format incorrect pour le package. Le format du paquet est très important pour que SystemJS sache comment le gérer. Documentation Ici

<script>
 System.config({
    packages: {
        appjs: {
            format: 'register',
            defaultExtension: 'js'
        },
        primeng: {
            format: 'cjs',
            defaultExtension: 'js'
        }
    },
    map: {
        'primeng': 'lib'
    }
});
 System.import('appjs/main').then(null, console.error.bind(console));
</script>

Dans mon cas, je mettais le format de primeng sur "register" au lieu de "cjs".

1
Nicolae Anghel

J'ai utilisé l'importation "invalide":

import {UrlSegment} from '@angular/router/index';

Après avoir supprimé/index , la compilation a été reprise.

0
D R