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

据我所知，这并不适用于所有人。例如，我的用户模型可以在授权服务后导出吗？它工作正常。

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

来自 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"

开发依赖：

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

Answer 1

这是桶装出口订单的问题。它已在此处的 angular 回购中报告：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

更改打字稿编译器选项以编译为 SystemJS 格式而不是 commonJS。这是通过将 tsconfig.json 的 compilerOptions.module 从 commonjs 更改为 system 来完成的。

请注意，当您更改该配置时，您需要将所有组件装饰器的 moduleId 属性从 module.id 更新为 __moduleName 并在 [=19] 中声明=]如下：

declare var __moduleName: string;

此模块格式不是 Angular-CLI 工具（由 Angular 团队创建的官方构建工具）中的默认格式，因此可能不被推荐或支持。

注意：我个人对任何解决方法都不满意。

Answer 2

您也可以在 Angular2 live 中遇到此错误，并提示 angular 不想实例化已经实例化的服务。如果您 "mis-" 包含该服务，例如ActivatedRoute from '@angular/router' in the providers 属性 of the @Component class decorator 尽管已经将 RouterModule 包含在 App.module 文件中，无论如何注册所有路由器提供者和应用指令。

Answer 3

我遇到了这个问题，这是由循环引用引起的。说明：在 'provider service class' 中，我引用了一个 UI 页面，该页面的构造函数引用了导致循环引用的同一服务...

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

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

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

在 app.component class 构造函数中，引用服务的构造函数，我只是将 link 设置为回调函数，如下所示。

this.servicingClass.setCallBackSpy(this.myCallBackFunctionUsingUIPage);

希望对您有所帮助，我的第一个回答:)

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

Automatic ordering of exports in index.ts makes app crash

typescript

angular

angular-cli

更改桶中出口的顺序

根本不用桶。

使用 systemJS 模块格式而不是 commonJS