Angular 2 Quickstart: token imprevisto <

Sto cercando di impostare angular 2 secondo il quickstart trovato su http://angular.io . Ho copiato tutti i file esattamente come descritto nella guida, ma quando lancio npm start e una scheda browser si apre, ottengo il messaggio “Loading …” con il seguente errore nella console:

 Uncaught SyntaxError: Unexpected token < (program):1 __exec @ system.src.js:1374 Uncaught SyntaxError: Unexpected token < angular2-polyfills.js:138 Evaluating http://localhost:3000/app/boot Error loading http://localhost:3000/app/boot 

Questo è il mio app.component.ts :

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

My First Angular 2 App

` }) export class AppComponent { }

Il mio boot.ts :

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

Il mio index.html :

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

Il mio package.json :

 { "name": "angular2-quickstart", "version": "0.1.0", "scripts": { "tsc": "tsc", "tsc:w": "tsc -w", "lite": "lite-server", "start": "concurrent \"npm run tsc:w\" \"npm run lite\" " }, "license": "MIT", "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" } } 

E infine il mio tsconfig.json :

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

Grazie in anticipo per qualsiasi aiuto.

Prova a sostituire questo

 System.config({ packages: { format: 'register', defaultExtension: 'js' } }); 

con questo

 System.config({ packages: { app: { // must match your folder name format: 'register', defaultExtension: 'js' } } }); 

Stavo cercando di applicare una struttura di cartelle leggermente diversa al loro quickstart e mi sono imbattuto nello stesso problema. Ho trovato che il nome della proprietà sull’object “pacchetti” doveva corrispondere alla cartella principale.

Un consiglio per chi incontra l’errore “Token inaspettato <". Per me, questo è successo quando SystemJS ha tentato di recuperare una dipendenza (file JavaScript) e invece il server web ha restituito una pagina HTML (da qui l'apertura inaspettata

Sono stato in grado di individuarlo in Strumenti di sviluppo di Chrome nella scheda Rete esaminando i file JavaScript scaricati uno alla volta finché non ho trovato quello in cui è stato restituito l’HTML. Ciò ha reso facile risolvere il problema con la mia importazione.

Sperando di ottenere un messaggio di errore più significativo ad un certo punto-

Ho avuto problemi simili con diversi moduli di nodo e sono venuto qui da Google.

Di solito, ricevo l’errore dopo aver import un pacchetto e poi tentato di usarlo.

Ad esempio, ho riscontrato lo stesso problema durante il caricamento di https://github.com/ngrx/store .

Ho controllato la mia scheda di rete e risulta che il file che è stato caricato per store.js (il file principale di quel modulo) non era corretto. Ha richiesto store.js, ma ho ottenuto il mio index.html, che è iniziato con , ovvero è iniziato con un “<", che non è un JavaScript valido.

Non è chiaro per me perché il mio index.html è stato servito al posto del file JavaScript reale. Una spiegazione potrebbe essere che SystemJS ha fatto una richiesta che non portava da nessuna parte e il mio server era configurato per servire index.html come predefinito. Non ho abbastanza dati per provarlo, però. Cum grano salis.

In ogni caso, l’ho risolto dicendo esplicitamente a SystemJS dove vive un pacchetto se non riesce a trovarlo da solo. Ad esempio, per correggere import { Store } from '@ngrx/store'; non riuscita import { Store } from '@ngrx/store'; , tu puoi fare:

 System.config({ packages: { src: { format: 'register', defaultExtension: 'js' } }, map: { '@ngrx/store' : '/node_modules/@ngrx/store/dist/store.js' } // <-- this! }); System.import('src/boot') .then(null, console.error.bind(console)); 

Perché il modulo Store risiede in quel file. In questo modo, SystemJS lo trova e il modulo può essere importato bene.

Ho avuto un problema simile importando rx.js ho finito per risolverlo aggiungendo un percorso al System.config()

 System.config({ defaultJSExtensions: true, paths: { 'rx' : 'lib/rx.js' } }); 

Avevo un problema simile, avevo configurato il server IIS per riscrivere tutti i percorsi su index.html per far funzionare correttamente il router. (L’aggiornamento della pagina stava restituendo 404. Leggi i dettagli in questa risposta )

Come sottolinea l’ utente @dchacke , è perché System.js aspetta che un file .js non sia un file .html . Questo in effetti produce lo strano messaggio che inizia con SyntaxError: Unexpected token < . Disabilitare temporaneamente la riscrittura dell'URL mi consente di vedere il vero problema.

Quando si importano componenti System.js in componenti padre, System.js può essere confuso se i percorsi non sono dichiarati correttamente.

Ad esempio parent.component.ts ha la seguente importazione:

import { ChildComponent } from './childComponentFolder/childComponent';

Genera questo errore:

 GET app/parentComponentFolder/childComponentFolder/childComponent.js 404 (Not Found) Error: Error: XHR error (404 Not Found) loading app/parentComponentFolder/childComponentFolder/childComponent.js 

La modifica del percorso dell'istruzione di importazione dal percorso relativo a assoluto risolve il problema:

import { ChildComponent } from 'app/childComponentFolder/childComponent';

Mappare il percorso in system.config.js potrebbe anche fare il trucco, ma trovo più difficile da mantenere perché non è immediatamente evidente il motivo per cui il percorso di importazione funziona o meno. Ora riesco a decommentare le regole di riscrittura in Web.config e tutto funziona perfettamente.

Modificare:

Sembra che il traspolatore typescript sia molto schizzinoso sui percorsi. Solo i percorsi relativi passano senza errori di lancio:

Fondamentalmente è necessario eseguire il backup di una cartella da parentComponentFolder/ a app/ cartella.

import { ChildComponent } from '../childComponentFolder/childComponent';

Mi sono imbattuto in questo stesso problema. L’ho risolto implementando quanto segue nel mio index.html (nota: ho inserito le dipendenze angular2 js nella cartella ‘lib’):

   Desktop main   
Loading...

Stavo ottenendo un problema simile:

 Unexpected token ] 

All’avvio del server. Risulta che ho avuto una virgola finale nel mio tsconfig.json :

 ... "files": [ "app.ts", "typings.d.ts", "abc-vt/abc-vt", <-Doh! ] 

Lezione: non dare per scontato che si tratti di un errore nel codice sorgente - controlla anche i tuoi file di configurazione.

Nel mio caso, ho inavvertitamente incluso l’estensione del file sull’importazione …

 import {SomeComponent} from 'some.component.ts'; 

E (ovviamente!) Avrebbe dovuto essere …

 import {SomeComponent} from 'some.component'; 

Ciò causerà una virgola finale nella configurazione del sistema.

Controlla il file systemjs.config.ts e assicurati che json sia valido.

Ho avuto un bug simile. Ho ottenuto:

 Uncaught SyntaxError: Unexpected token = (index):16 

perché ho lanciato un punto e virgola alla fine di @Input() nel file hero-detail.component .

Spero che questo aiuti qualcuno.

La causa principale di questo problema è che il file che stai tentando di importare è un file html, non un file js. Puoi visualizzarlo utilizzando la scheda di rete in Chrome per dare un’occhiata al file che ha effettivamente importato.

Il mio problema non è stato risolto con i metodi sopra. Per me è successo perché avevo indirizzato tutte le rotte predefinite alla pagina index.html, che è il modo in cui ottengo il deep linking angular che funziona in Visual Studio Enterprise. Quando ho richiesto un file senza estensione e non è stato in grado di trovare quel file, sarebbe stata utilizzata la pagina index.html predefinita, che avrebbe iniziato con un carattere

Il regalo per me è stato che quando ho messo il percorso completo al file esatto, avrebbe funzionato.

In ogni caso, per risolvere il problema, ho dovuto aggiungere una route Ignora per la cartella node_modules nel mio file RouteConfig.cs:

 public static void RegisterRoutes(RouteCollection routes) { routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); routes.IgnoreRoute("node_modules/{*pathInfo}"); } 

Ho ricevuto lo stesso messaggio di errore. Simile a quello che altre persone hanno menzionato, il mio caso è stato causato da url riscritture, servendo l’html invece del javascript previsto dall’angular.

Sto usando lite-server / browser-sync per sviluppare e ospitare la mia app localmente. Stavo usando il routing angular per funzionare correttamente

 var history = require('connect-history-api-fallback') 

per redirect la navigazione pushState pertinente a index.html. In definitiva, una errata configurazione delle importazioni del typescript ha portato a una richiesta che non veniva riconosciuta come un file js e invece reindirizzata a index.html. La difficoltà era come capirlo.

Ho scoperto che è ansible abilitare la registrazione dettagliata per connect-history-api-fallback.

  middleware: [history({ index: '/src/index.html', verbose: true })] 

che poi mi ha portato a trovare il colpevole esaminando il registro per le voci reindirizzate:

 Not rewriting GET /node_modules/systemjs/dist/system.js because the path includes a dot (.) character. Not rewriting GET /node_modules/core-js/client/shim.min.js because the path includes a dot (.) character. Rewriting GET /src/culprit to /src/index.html 

Per coloro che hanno letto tutto e non hanno trovato nulla di interessante, potrei avere un’altra opzione per te.

Ho incontrato lo stesso problema perché il sito Web è stato distribuito su più di un server web. Il problema era legato a diverse build distribuite su alcuni server.

Fondamentalmente, hai 1 server con una versione e un altro server con qualche altra versione. Quindi, naturalmente, quando si carica il bilancio è probabile che si ottenga 404 su alcune risorse su alcuni server perché le versioni sono diverse (ricordare il main.xxxxx.js dove xxx è diverso ad ogni build). E se hai configurato il tuo webserver per restituire una pagina web 404 – cosa che capita molto, credo – ottieni del codice HTML invece dei file JS, quindi il token imprevisto.

Quindi, controlla le tue versioni su ciascun server!

Per me, questo errore è stato causato perché ho servito il mio frontend angular con un semplice nodo express server in quanto tale:

 app.use('/*', (req, res) => { res.sendFile(path.join(__dirname,'index.html')); }); 

ma mi ero dimenticato di specificare che tutti i file statici dovrebbero essere pubblicati dalla directory corrente con la linea:

 app.use(express.static(__dirname)); 

Quindi ogni chiamata per un asset statico ha restituito index.html. Woops. Una volta aggiunta questa linea, tutto andava bene. Spero che questo possa aiutare qualcuno in prima linea 🙂