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

时间：2016-06-18 23:13:59

标签： typescript angular angular-cli

每次在共享文件夹中生成内容时，都会重建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"

3 个答案:

答案 0 :(得分：33)

这是桶装出口订单的问题。这里有角度回购报告：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团队创建的官方构建工具）中的默认格式，因此可能不建议或不支持。

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

答案 1 :(得分：3)

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

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

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

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

在app.component类构造函数中，引用该服务的构造函数，我只需将链接设置为回调函数，如下所示。

this.servicingClass.setCallBackSpy(this.myCallBackFunctionUsingUIPage);

希望有帮助，我的第一个回答：）

答案 2 :(得分：1)

您也可以在Angular2 live中获取此错误，并建议angular不想实例化已经实例化的服务。如果您“错误地”包含服务，则可能发生这种情况，例如：虽然已经在App.module文件中包含了RouterModule，但仍然在@Component类装饰器的providers属性中的'@ angular / router'中激活了路由，该文件无论如何都会为App注册所有路由器提供程序和指令。

相关问题
最新问题