Question

我正在尝试使用Angular2 gitter频道中提到的这段代码将一些身份验证放入我的Angular2应用程序中：https://github.com/ronzeidman/ng2-ui-auth我认为我可能不会完全理解某些内容。

我在控制台中收到以下错误：

（节目）中的

Uncaught SyntaxError: Unexpected token <：1

和

angular2-polyfills.js中的

Uncaught SyntaxError: Unexpected token <：138

但是在第二个错误的正文中，它表示如下：

Evaluating http://localhost:3001/node_modules/ng2-ui-auth/src/auth
Error loading http://localhost:3001/app/boot.js

相关代码：

应用程序/ boot.ts：

import {bootstrap} from 'angular2/platform/browser';
import {provide} from 'angular2/core';
import {AuthHttp} from 'angular2-jwt';
import {AppComponent} from './app.component';
import {HTTP_PROVIDERS} from 'angular2/http';
import {Config, SATELLIZER_PROVIDERS, Auth} from 'ng2-ui-auth';
import 'rxjs/add/operator/map'

bootstrap(AppComponent, [
    HTTP_PROVIDERS,
    SATELLIZER_PROVIDERS({providers: {google: {clientId: GOOGLE_CLIENT_ID}}}),
    provide(AuthHttp, {
        useFactory: (auth: Auth, config: Config) => {
            return new AuthHttp({
                tokenName: config.tokenName,
                tokenGetter: () => auth.getToken(),
            });
        },
        deps: [Auth, Config],
    }),
]);

的index.html：

<html>
  <head>
    <title>App Name</title>

    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="config.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
    <script src="node_modules/angular2/bundles/http.js"></script>
    <script src="node_modules/angular2/bundles/router.dev.js"></script>
    <script>System.import('app/boot').then(null, console.error.bind(console));</script>

  </head>
  <body>
    <cw-api-app>Loading...<cw-api-app>
  </body>
</html>

config.js：

System.config({
  packages: {
    app: {
      format: 'register',
      defaultExtension: 'js'
    }
  },
  map: {
    'angular2-jwt': 'node_modules/angular2-jwt/angular2-jwt.js',
    'browser': 'node_modules/angular2/platform/browser.js',
    'ng2-ui-auth': 'node_modules/ng2-ui-auth/export.js',
    'auth': 'node_modules/ng2-ui-auth/export.js'
  }
});

应用程序/ app.component.ts：

import {Component} from 'angular2/core';
import {UserService} from './services/user.service';
import {LoginComponent} from './login.component';
import {UserDashboardComponent} from './user-dashboard.component';

@Component({
  selector: 'cw-api-app',
  template: `
    <h1>{{title}}</h1>
    <div><p>Test!</p></div>
    <ul><li (click)="userFetch(event)">Blah</li></ul>
    <div class="user-info">
      <cw-user-dashboard [user]="user"></cw-user-dashboard>
    </div>
      <app-login></app-login>
  `
  directives: [UserDashboardComponent, LoginComponent],
  providers: [UserService]
})

export class AppComponent {
  public title = "App Name";
  public user: Object;

  constructor(private _userService: UserService) { }

  userFetch() {
    console.log("wtf");
    this._userService.getUserDashboard().subscribe(res => this.user = res);
  }
}

应用程序/ login.component.ts：

import {Component, AfterContentInit, ElementRef, Renderer} from 'angular2/core';
import {Router, ROUTER_DIRECTIVES} from 'angular2/router';
import {FormBuilder, ControlGroup, Validators} from 'angular2/common';
import {Auth} from 'ng2-ui-auth';
//import {NgMessages} from '../formComponents/ngMessages';
//import {CustomValidators} from '../formComponents/customValidators';
//import {DefaultHandlers} from '../httpDefaults';

/**
 * Created by Ron on 18/12/2015.
 */

@Component({
    selector: 'app-login',
//    templateUrl: '../templates/login_form.html',
    directives: [NgMessages, ROUTER_DIRECTIVES],
})
export class Login implements AfterContentInit {
    form: ControlGroup;
    user = { email: '', password: '' };
    userControlsConfig = {
        email: ['', Validators.compose([Validators.required, CustomValidators.email])],
        password: ['', Validators.required],
    };
    login() {
        this.auth.login(this.user)
            .subscribe(
                () => this.goToMain(),
                this.handlers.error
            );
    }
    authenticate(provider: string) {
        this.auth.authenticate(provider)
            .subscribe(
                () => this.goToMain(),
                this.handlers.error
            );
    }
    goToMain() {
        this.router.navigate(['Main']);
    }
    ngAfterContentInit() {
        this.renderer.setElementClass(this.element, 'app', true);
        if (this.auth.isAuthenticated()) {
            this.goToMain();
        }
    }
    constructor(private auth: Auth,
                private fb: FormBuilder,
                private router: Router,
                private element: ElementRef,
                private renderer: Renderer,
                private handlers: DefaultHandlers) {
        this.form = fb.group(this.userControlsConfig);
    }
}

Answer 1

UPD 1 ：最后我设法解决了初始问题：使用Angular 2隐式OAuth2。同样，这不是主题启动器的直接答案，但可能是更一般的答案。

查看this gist

在那里，您将找到如何使用另一个Angular 2 TS代码实现客户端OAuth2。

致Michael Oryl的信用。

=======以下是初步答案======

我没有准确的答案'如何修复'，但我认为问题的原因与'import'语句有关。

import {bootstrap} from 'angular2/platform/browser';
import {provide} from 'angular2/core';                      // << This works OK
import {HTTP_PROVIDERS} from 'angular2/http';
import {NG2_UI_AUTH_PROVIDERS, JwtHttp} from 'ng2-ui-auth'; // << This tries to load a script from URL like '{SERVER_ROOT}/ng2-ui-auth', but gets the HTML from node.js

在'node_modules'中，文件'angular2 / core.ts'和第二个import语句中的路径相同。但'ng2-ui-auth'只有'export.ts'。我试图将导入路径更改为'ng2-ui-auth / export'但没有成功。

默认情况下，可能会使用'ng2-ui-auth'路径导入export.ts，因此Ron公开的import语句是正确的。所以，这只是我猜测我上面描述的内容。

如果我是，我们需要找出'import'语句中应该使用的文件。

Answer 2

看看这个：Evaluating http://localhost:3001/node_modules/ng2-ui-auth/src/auth，它试图在你的配置文件中输入没有.js扩展名的ng2-ui-auth / src / auth packages: { app: { format: 'register', defaultExtension: 'js' } }, 这意味着默认扩展程序仅存在于＆＃39; app＆＃39;文件夹，尝试将默认扩展名添加到整个系统或专门添加到ng2-ui-auth。如果您希望将此问题添加到我的github中，我将只显式添加所有js扩展名。
---编辑---
尝试添加js扩展，不适用于打字稿。将所有内容汇总到一个文件可能会有效，但打字稿只支持＆＃39; amd＆＃39;和＆＃39;系统＆＃39;模块类型和人们真的很喜欢commonjs之一。如果有人有一个很好的解决方案，欢迎他提出拉动请求（它可能是一个处理它的gulpfile）
---第二次编辑---
在版本1.1.0中所有文件合并，所以这不应该是一个问题。

加载/boot.js时出错

2 个答案: