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

所以我正在构建一个有角度的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:`
        

            
        
`
})
@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']);
        }
    }
}

import {Component} from 'angular2/core';

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

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

Uncaught SyntaxError: Unexpected token 

以下是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
    ) {  }
}

    

  




  
  
  

    

      

        Abdulrahman ..
         11
      
      
在您的login.component.ts中:

import {Auth} from './auth';


代替

import {Auth} from 'auth';


据我了解,这是ES6导入语法的工作方式.从模块名称"not a path"导入时,必须事先使用System.register()注册该模块.因此,当您导入'auth'时,系统将查找名为'auth'的已注册模块.

另一方面,如果从相对于文件的'./some/path'导入,则无需在全局注册即可导入模块.

查看SystemJS文档以获取更多信息


1> Abdulrahman ..：
在您的login.component.ts中:

import {Auth} from './auth';


代替

import {Auth} from 'auth';


据我了解,这是ES6导入语法的工作方式.从模块名称"not a path"导入时,必须事先使用System.register()注册该模块.因此,当您导入'auth'时,系统将查找名为'auth'的已注册模块.

另一方面,如果从相对于文件的'./some/path'导入,则无需在全局注册即可导入模块.

查看SystemJS文档以获取更多信息