为什么我会收到“意外令牌<"角度2的错误? [英] Why am i getting "Unexpected token <" errors in angular 2?

问题描述

因此，我正在构建一个angular 2应用程序，这很简单.包含1页和一个登录屏幕.这是我的文件结构:

So I'm building an angular 2 app, it's simple. contains 1 page and a login screen. here is my file structure:

├── 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:

and my files: 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:

dashboard.component.ts:

import {Component} from 'angular2/core';

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

login.components.ts:

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.完成此操作后，我会收到以下错误消息:

EVERYTHING at this point works great. Until I import auth.ts login.components.ts. Once I do this I get these errors:

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现在的样子:

Here is what login.components.ts looks like now:

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看起来像这样:

and auth.ts looks like this:

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

您的login.component.ts中的

推荐答案

:

import {Auth} from './auth';

代替

import {Auth} from 'auth';

据我了解，这就是ES6导入语法的工作方式.从模块名称不是路径"导入时，必须事先使用System.register()注册该模块.因此，当您导入"auth"时，系统将查找一个名为"auth"的注册模块.

As I understand, this is the way the ES6 import syntax works. when importing from a module name "not a path", the module has to be registered beforehand using System.register(). So, when you import 'auth', the system will look for a registered module called 'auth'.

另一方面，如果从相对于文件的'./some/path'导入，则模块将被导入而无需全局注册.

On the other hand, if you import from './some/path' relative to your file, the module will be imported without having to be registered globally.

在SystemJS文档中查找更多信息

这篇关于为什么我会收到“意外令牌<"角度2的错误?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！