为什么我在角度2中出现“意外的令牌”错误？

Question

所以我正在构建一个角度2的应用程序，这很简单。包含1页和登录屏幕。这里是我的文件结构：

├── node_modules 
├── app 
| ├── app.component.ts 
| ├── boot.ts 
| ├── pages 
|  |── dashboard 
|   |── dashboard.components.ts 
|   |── dashboard.html 
|  |── login 
|   |── login.components.ts 
|   |── login.html 
|   |── auth.ts 

和我的文件： app.component.ts：

import {Component OnInit} from 'angular2/core'; 
import { RouteConfig, ROUTER_DIRECTIVES ,Router} from 'angular2/router'; 
import {LoginComponent} from './pages/login/login.component'; 
import {DashboardComponent} from './pages/dashboard/dashboard.component' 
@Component({ 
    selector: 'app', 
    directives:[ROUTER_DIRECTIVES], 
    template:` 
     <div class="wrapper"> 
      <router-outlet></router-outlet> 
     </div>` 
}) 
@RouteConfig([ 
    { path: '/',name: 'Home',redirectTo: ['Dashboard'] }, 
    { path: '/login',name:'Login',component: LoginComponent }, 
    { path: '/dashboard',name:'Dashboard',component: DashboardComponent,} 
]) 
export class AppComponent implements OnInit{ 
    private userAuthenticated = false; 
    constructor(
     private _router: Router 
    ){} 
    ngOnInit(){ 
     if(!this.userAuthenticated){ 
      this._router.navigate(['Login']); 
     } 
    } 
} 

dashboard.component.ts：

import {Component} from 'angular2/core'; 

@Component({ 
    templateUrl:'app/pages/dashboard/dashboard.html' 
}) 
export class DashboardComponent{ 
    public message = "Hello"; 
} 

login.components.ts：

import {Component} from 'angular2/core'; 
import {NgForm} from 'angular2/common'; 
@Component({ 
    selector:"login", 
    templateUrl:'app/pages/login/login.html', 
}) 
export class LoginComponent{ 
} 

所有东西在这一点很好。直到我导入auth.ts login.components.ts。一旦我这样做，我得到这些错误：

Uncaught SyntaxError: Unexpected token <U @ system.src.js:4597o.execute @ system.src.js:4597i @ system.src.js:4597n @ system.src.js:4597execute @ system.src.js:4597y @ system.src.js:4597w @ system.src.js:4597p @ system.src.js:4597h @ system.src.js:4597(anonymous function) @ system.src.js:4597run @ angular2-polyfills.js:138zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$$internal$$tryCatch @ angular2-polyfills.js:1511lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:1523lib$es6$promise$$internal$$publish @ angular2-polyfills.js:1494(anonymous function) @ angular2-polyfills.js:243run @ angular2-polyfills.js:138zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$asap$$flush @ angular2-polyfills.js:1305 
    angular2-polyfills.js:138 Uncaught SyntaxError: Unexpected token < 
     Evaluating http://local.intranet/auth 
     Error loading http://local.intranet/app/boot.js 

这里是login.components.ts现在这个样子容貌：

import {Component} from 'angular2/core'; 
import {NgForm} from 'angular2/common'; 
import {Auth} from 'auth'; 
@Component({ 
    selector:"login", 
    templateUrl:'app/pages/login/login.html', 
}) 
export class LoginComponent{ 
    login = new Auth("",""); 
    onSubmit(){console.log(this.login)}; 
} 

和auth.ts看起来是这样的：

export class Auth { 
    constructor(
     public userName: string, 
     public password: string 
    ) { } 
} 

Answer 1

在您的login.component.ts中：

import {Auth} from './auth'; 

i nstead

import {Auth} from 'auth'; 

据我所知，这是ES6导入语法的工作方式。当从模块名称“不是路径”导入时，必须事先使用System.register（）注册该模块。所以，当你导入'auth'时，系统会寻找一个名为'auth'的注册模块。另一方面，如果从'./some/path'相对于您的文件导入，模块将被导入，而不必全局注册。

look in the SystemJS docs for more info