Angular2 bug di installazione di 5 minuti: la richiesta non è definita

Sto eseguendo l’ avvio rapido di 5 minuti di Angular2 .

Circa a metà del tutorial ora, ho i seguenti file installati correttamente:

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

Ran npm start e sto ricevendo questo errore:


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


Ho trovato questo collegamento sull’uso dello sh6 es6 e ho incluso .

Tuttavia sto ancora ricevendo l’ Uncaught ReferenceError: require is not defined errore.


app.component.ts

 import {Component} from 'angular2/core'; @Component({ selector: 'my-app', template: '

My First Angular 2 App

' }) export class AppComponent { }

(APP / boot.ts)

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

index.html

   Angular 2 QuickStart         System.config({ packages: { app: { format: 'register', defaultExtension: 'js' } } }); System.import('app/boot') .then(null, console.error.bind(console));     Loading...   

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’app compilata / boot.js

inserisci la descrizione dell'immagine qui

Ultimo registro da npm start

inserisci la descrizione dell'immagine qui

Ho scoperto che il motivo per cui il mio ha causato un errore era dovuto al modulo impostato come “commonjs” nel mio file tsconfig.json , cambiandolo in sistema lo aggiustato, ora sembra che sotto

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

EDIT Questa risposta era basata su Angular 2 beta 17. Basandosi sul tempo di questa risposta e sui rapidi cambiamenti angolari 2 ha subito, questo potrebbe non funzionare più.

Ho lo stesso errore nella versione angular2.beta15.

L’ho risolto rimuovendo

 format: 'register', 

fuori index.html

  

OK, finalmente ho fatto funzionare la mia app “di base”.

Prima il mio problema era che npm start non stava compilando i miei file .ts typescript.

Da questo post , ho trovato una risposta qui Imansible trovare il modulo esterno ‘angular2 / angular2’ – Angular2 w / Typescript

Avevo bisogno di eseguire npm install -g [email protected] per aggiornare la mia definizione TypeScript. Subito dopo ho dovuto aggiornare la TypeScript Definition (TSD) per Angular2 tsd install angular2 .

Dopo che questo è stato fatto, stavo ancora ricevendo errori dal mio file boot.js.

Invece di questa import {AppComponent} from './app.component'

Avevo bisogno di scriverlo come questo import {AppComponent} from '../app.component.js'


Ora funziona! https://github.com/leongaban/angular2quickstart

inserisci la descrizione dell'immagine qui


Un problema fastidioso è che npm start non sta compilando automaticamente i file typescript, quindi devo ancora compilare manualmente ogni file .ts a mano tsc app.component.ts --module system

Sto usando angular-cli e ora usa il webpack ma stavo ricevendo questo errore quando caricavo css. Ho aggiunto declare let require: any; prima del mio componente e ora funziona.

Se stai seguendo il tutorial Upgrade to Angular2, questo potrebbe darti fastidio:

Assicurati di non caricare ancora manualmente i file javascript convertiti quando converti i file in typescript e utilizza i caricatori di moduli per caricarli.

Avevo convertito alcuni file in TS, ma continuavo a caricare i file JS originali (ora transpiled) nell’index.html. Se lo fai, continuerai a ricevere “require is not defined” perché la libreria “require” non è ancora stata caricata.

Bottom line: Quindi, se ottieni “require is not defined” metti un’istruzione debugger prima della riga incriminata (per me, era import {Injectable} da ‘@ angular / core’), guarda quali file sorgenti sono stati caricati e assicurati di non caricare ancora il file manualmente.

Ho avuto un problema simile causato dal fatto che stavo impostando il formato sbagliato per il pacchetto. Il formato del pacchetto è molto importante affinché SystemJS sappia come gestirlo. Documentazione qui

  

Nel mio caso stavo impostando il formato di primeng su “register” invece di “cjs”.

Ho usato l’importazione “non valida”:

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

Dopo aver rimosso / indice ha iniziato a compilare di nuovo.