Angular CLI: "Unerwarteter Token-Import" während der Testausführung mit Karma

Question

Ich verwende Angular 2 mit TypeScript. Ich habe dieses Projekt mit dem Tool "Angular CLI" erstellt und versucht, die Testfälle innerhalb von "app.component.spec.ts" mit dem Befehl "karma start" auszuführen. Dieser Testfall wird von Angular CLI selbst generiert und ändert sich nicht. Als ich den Testfall gibt es mir folgende Fehler laufen -

C:\Projects\Angular2\TestProject>karma start 
21 08 2016 16:18:34.167:WARN [karma]: No captured browser, open http://localhost:9876/ 
21 08 2016 16:18:34.178:INFO [karma]: Karma v0.13.22 server started at http://localhost:9876/ 
21 08 2016 16:18:34.205:INFO [launcher]: Starting browser Chrome 
21 08 2016 16:18:36.677:INFO [Chrome 52.0.2743 (Windows 7 0.0.0)]: Connected on socket /#u3qiejjLaOGa5HdGAAAA with id 54026183 
Chrome 52.0.2743 (Windows 7 0.0.0) ERROR 
    Uncaught SyntaxError: Unexpected token import 
    at C:/Projects/Angular2/TestProject/src/app/app.component.spec.ts:5 

Könnte jemand bitte helfen, wie dieses Problem zu lösen.

app.component.spec.ts -

/* tslint:disable:no-unused-variable */ 
/// <reference path="../../typings/globals/jasmine/index.d.ts" /> 

import { addProviders, async, inject } from '@angular/core/testing'; 
import { AppComponent } from './app.component'; 

describe('App: TestProject',() => { 
    beforeEach(() => { 
    addProviders([AppComponent]); 
    }); 

    it('should create the app', 
    inject([AppComponent], (app: AppComponent) => { 
     expect(app).toBeTruthy(); 
    })); 

    it('should have as title \'app works!\'', 
    inject([AppComponent], (app: AppComponent) => { 
     expect(app.title).toEqual('Test Project Title'); 
    })); 
}); 

Answer 1

Um Typoskript Tests in Karma benötigen Sie einen Präprozessor wie diese karma-typescript-preprocessor

oder Sie können einfach führen Sie Ihre Tests mit transpiled 'js' Testdateien laufen

Answer 2

Ich hatte den gleichen Fehler. Mein Problem war, dass alle .ts Dateien in meinem Verzeichnis spec nicht von angle-cli korrekt erkannt wurden. Ich hatte einige Konfigurationsprobleme in meinem karma.conf.js. Ich änderte die folgenden:

files: [ 
    { pattern: './web/spec/test.ts', watched: false } 
], 
preprocessors: { 
    './invalid-path/to/test.ts': ['angular-cli'] 
}, 

zu

files: [ 
    { pattern: './web/spec/test.ts', watched: false } 
], 
preprocessors: { 
    './web/spec/test.ts': ['angular-cli'] 
}, 

Danach wurde der Import richtig interpretiert und die .ts Dateien zusammenstellen können, ohne Fehler wieder ng test zu verwenden.