index.ts中导出的​​自动排序会导致应用程序崩溃

Question

每次我在共享文件夹中生成内容时,都会重建index.ts文件,并按字母顺序放置导出.这似乎打破了我的依赖.手动更改顺序,以便在具有依赖项的类之前导出依赖项使其再次起作用.

如果我们有app/shared/auth.guard.ts:

import { Injectable } from '@angular/core';
import { CanActivate, Router, ActivatedRouteSnapshot } from '@angular/router';
import { Observable } from 'rxjs/Observable';

import { AuthService, User } from './';

@Injectable()
export class AuthGuard implements CanActivate {

    constructor(private accountService: AuthService, private router: Router) { }

    canActivate(next: ActivatedRouteSnapshot): Observable<boolean> {
        let result = this.accountService.currentUser.first().map(user => user != null);

        let route: any[] = ['/login'];

        if (next.url.length) {
            route.push({ redirectUrl: next.url });
        }

        result.subscribe(isLoggedIn => {
            if (!isLoggedIn) {
                this.router.navigate(route);
            }
        });

        return result;
    }
}

并且app/shared/account.service.ts:

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

import { User } from './';

const LOCAL_STORAGE_KEY = 'currentUser';

@Injectable()
export class AuthService {
  private currentUserSubject: BehaviorSubject<User>;

  constructor() {
    this.currentUserSubject = new BehaviorSubject<User>(this.getUserFromLocalStorage())
    this.currentUserSubject.subscribe(user => this.setUserToLocalStorage(user));
  }

  logIn(userName: string, password: string) : Observable<User> {
    this.currentUserSubject.next({
      id: userName,
      userName: userName,
      email: userName
    });

    return this.currentUser.first();
  }

  logOut() {
    this.currentUserSubject.next(null);
  }

  get currentUser(): Observable<User> {
    return this.currentUserSubject.asObservable();
  }

  private getUserFromLocalStorage(): User {
    let userString = localStorage.getItem(LOCAL_STORAGE_KEY);

    if (!userString) {
      return null;
    }

    return JSON.parse(userString);
  }

  private setUserToLocalStorage(user: User) {
    if (user) {
      localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(user));
    }
    else {
      localStorage.removeItem(LOCAL_STORAGE_KEY);
    }
  }

}

这不起作用:

export * from './auth.guard';
export * from './auth.service';

Unhandled Promise rejection: Error: Cannot resolve all parameters for 'AuthGuard'(undefined, Router). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'AuthGuard' is decorated with Injectable.

这有效:

export * from './auth.service';
export * from './auth.guard';

从我注意到这并不适用于所有人.例如,我可以在auth服务后导出我的用户模型,它可以正常工作.

我希望我不必每次都手动更改它.有可用的解决方法吗？我可以用不同的方式构建文件吗？

依赖性来自package.json:

"@angular/common": "^2.0.0-rc.2",
"@angular/compiler": "^2.0.0-rc.2",
"@angular/core": "^2.0.0-rc.2",
"@angular/forms": "^0.1.0",
"@angular/http": "^2.0.0-rc.2",
"@angular/platform-browser": "^2.0.0-rc.2",
"@angular/platform-browser-dynamic": "^2.0.0-rc.2",
"@angular/router": "^3.0.0-alpha.7",
"bootstrap": "^3.3.6",
"es6-shim": "0.35.1",
"moment": "^2.13.0",
"ng2-bootstrap": "^1.0.17",
"reflect-metadata": "0.1.3",
"rxjs": "5.0.0-beta.6",
"slideout": "^0.1.12",
"systemjs": "0.19.26",
"zone.js": "0.6.12"

devDependencies:

"angular-cli": "1.0.0-beta.6"

Answer 1

这是桶装出口订单的问题.这里有角度回购报告:https://github.com/angular/angular/issues/9334

有三种解决方法:

更改桶中的出口顺序

更改排序,以便在其依赖项之前列出模块依赖项.

在此示例中,AuthGuard 依赖于AuthService.AuthService是AuthGuard的依赖项.因此,在AuthGuard之前导出AuthService.

export * from './auth.service';
export * from './auth.guard';

根本不要使用桶.

建议不要这样做,因为这意味着需要更多的进口.

在此示例中,您将从其文件而不是桶中导入AuthService.

import { AuthService } from './auth.service';
import { User } from './';

使用systemJS模块格式而不是commonJS

更改typescript编译器选项以编译为SystemJS格式而不是commonJS.这是通过改变tsconfig.json的完成compilerOptions.module从commonjs到system.

请注意,当您更改配置,你需要更新moduleId您的所有组件装饰的性质module.id来__moduleName并声明它typings.d.ts,如下所示:

declare var __moduleName: string;

此模块格式不是Angular-CLI工具(由Angular团队创建的官方构建工具)中的默认格式,因此可能不建议或不支持.

注意:我个人对任何解决方法都不满意.

Answer 2

我有这个问题，这是由循环引用引起的。说明：在“提供者服务类”中，我引用了一个 UI 页面，该页面的构造函数引用了导致循环引用的相同服务...

import { MyUIPage } from "../pages/example/myuipage";

所以我必须做的是从服务中删除引用并构建一个接收回调的函数。无需从服务中引用 UI 页面，错误就会消失。

public setCallBackSpy(callback)
{
   this.callBackSpy = callback;
}

在 app.component 类构造函数中，引用服务的那个，我简单地设置了回调函数的链接，如下所示。

this.servicingClass.setCallBackSpy(this.myCallBackFunctionUsingUIPage);

希望有帮助，我的第一个答案:)