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';

而不是

import {Auth} from 'auth';

据我了解，这是ES6导入语法的工作方式。从模块名称＆＃34;而不是路径＆＃34;进行导入时，必须事先使用System.register（）注册该模块。因此，当您导入＆＃39; auth＆＃39;时，系统会查找名为＆＃39; auth＆＃39;的注册模块。

另一方面，如果您从＆＃39; ./ some / path＆＃39;导入相对于您的文件，将导入模块而无需在全局注册。

look in the SystemJS docs for more info

为什么我会收到“意外的令牌＆lt;”角度2的误差？

1 个答案: