Angular2 bug d'installation de 5 minutes – requis n'est pas défini

Je fais le démarrage rapide de Angular2 5 minutes .

À peu près à mi-parcours du tutoriel maintenant, j'ai configuré les fichiers suivants correctement:

  • Index.html,
  • App.component.ts
  • App / boot.ts
  • Package.json
  • Tconfig.json

Ran npm start et obtenez 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 la caisse es6 et j'ai inclus <script src="node_modules/es6-shim/es6-shim.js"></script> .

Cependant, je reçois toujours l' Uncaught ReferenceError: require is not defined erreur Uncaught 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" ] } 

L'application compilée / boot.js

Entrez la description de l'image ici

Dernier journal de npm start

Entrez la description de l'image ici

J'ai constaté que la raison pour laquelle la mine a provoqué une erreur était due à un module défini comme "commonjs" dans mon fichier tsconfig.json , en le modifiant au système , il se trouve maintenant

 { "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 a été basée sur Angular 2 beta 17. Basé sur le temps de cette réponse et les changements rapides angulaires 2 ont subi, cela peut ne plus fonctionner.

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

Je l'ai résolu en supprimant

 format: 'register', 

Hors index.html

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

OK a enfin obtenu mon application «basique» pour fonctionner.

Tout d'abord, mon problème était que npm start ne compile pas mes fichiers .ts .

A partir de cette publication , j'ai trouvé une réponse ici. Ne peut trouver le module externe 'angular2 / angular2' – Angular2 w / Typecript

J'avais besoin d'exécuter npm install -g tsd@latest pour mettre à jour ma définition TypeScript. Juste après, je devais mettre à jour la Définition TypeScript (TSD) pour Angular2 tsd install angular2 .

Après cela, j'ai toujours eu des erreurs à partir 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

Entrez la description de l'image ici


Un problème ennuyeux est que le npm start n'est toujours pas la compilation automatique des fichiers dactylographiés, donc je dois toujours compiler manuellement chaque fichier .ts à la main tsc app.component.ts --module system

J'utilise angular-cli et il utilise maintenant le webpack, mais j'avais cette erreur lors du chargement de css. J'ai ajouté declare let require: any; Avant mon composant et maintenant il fonctionne.

J'ai eu un problème similaire qui a été causé par le fait que je configurais le mauvais format pour le paquet. Le format du package est très important pour que SystemJS puisse savoir 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 configurais le format de primeng pour "enregistrer" au lieu de "cjs".

Si vous suivez le didacticiel Upgrade to Angular2, cela peut vous mordre:

Assurez-vous que vous ne chargez toujours pas vos fichiers javascript convertis lorsque vous convertissez les fichiers en formatcript et utilisez les chargeurs de modules pour les charger.

J'avais converti certains fichiers en TS, mais je charge toujours les fichiers JS originaux (maintenant transpilés) dans l'index.html. Si vous faites cela, vous obtiendrez "besoin n'est pas défini" car la bibliothèque "nécessite" n'a pas encore été chargée.

En bout de ligne: Donc, si vous obtenez "requête n'est pas définie", inscrivez une déclaration de débogueur avant la ligne offensante (pour moi, il était importé {Injectable} à partir de '@ angulaire / noyau'), regardez les fichiers sources chargés et Assurez-vous que vous ne chargez toujours pas le fichier manuellement.

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

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

Après avoir supprimé / index, il a commencé à compiler à nouveau.