index.ts中的导出自动排序使应用程序崩溃 [英] Automatic ordering of exports in index.ts makes app crash
问题描述
每次我在共享文件夹中生成内容时，都会重建index.ts文件，并按字母顺序排列导出.这似乎打破了对我的依赖.手动更改顺序，以便在具有依赖项的类使它重新起作用之前先导出依赖项.
Every time I generate something in my shared folder the index.ts file is rebuilt and exports are put in alphabetical order. This seems to break dependencies for me. Changing order manually so that dependencies is exported before classes with the dependencies makes it work again.
如果我们有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';
从我发现的情况来看，这并不适用于所有情况.例如，可以在认证服务后导出我的用户模型，并且可以正常工作.
From what I noticed this doesn't apply to all. For example can my user model be exported after auth service and it works fine.
我希望我不必每次都手动更改此设置.有没有解决方法?我可以用其他方式构造文件吗?
I wish I didn't have to change this manually every time. Is there a workaround available? Could I structure the files in a different way?
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:
devDependencies:
"angular-cli": "1.0.0-beta.6"
推荐答案
这是桶中出口排序的问题.在这里的角度回购中已有报道: https://github.com/angular/angular/issues/9334
This is an issue with ordering of exports in barrels. It has been reported in the angular repo here: https://github.com/angular/angular/issues/9334
有三种解决方法:
更改顺序，以使模块依赖项在其依赖项之前列出.
Change the ordering so that module dependencies are listed before their dependants.
在此示例中，AuthGuard 依赖于. AuthService是AuthGuard的依赖项.因此，请在AuthGuard之前导出AuthService.
In this example, AuthGuard depends on AuthService. AuthService is a dependency of AuthGuard. Therefore, export AuthService before AuthGuard.
export * from './auth.service';
export * from './auth.guard';
完全不用桶.
不建议这样做，因为这意味着需要更多的进口.
Don't use barrels at all.
This is not recommended since it means more imports are required.
在此示例中，您将从其文件而不是桶中导入AuthService.
In this example, you would import AuthService from its file rather than a barrel.
import { AuthService } from './auth.service';
import { User } from './';
使用systemJS模块格式而不是commonJS
更改打字稿编译器选项，以编译为SystemJS格式，而不是commonJS.这是通过将tsconfig.json的compilerOptions.module从commonjs更改为system来完成的.
Use the systemJS module format rather than commonJS
Change the typescript compiler options to compile to the SystemJS format rather than commonJS. This is done by changing tsconfig.json's compilerOptions.module from commonjs to system.
请注意，当您更改配置时，需要将所有组件装饰器的moduleId属性从module.id更新为__moduleName，并在typings.d.ts中进行声明，如下所示:
Note that when you change that configuration, you'll need to update the moduleId properties of all your component decorators from module.id to __moduleName and declare it in typings.d.ts as follows:
declare var __moduleName: string;
此模块格式不是 Angular-CLI 工具(由Angular创建的正式构建工具)中的默认格式团队)，因此可能不推荐或不支持.
This module format is not the default in the Angular-CLI tool (official build tool created by the Angular team) and so may not be recommended or supported.
注意:我个人对任何解决方法都不满意.
Note: I'm personally not satisfied with any of the workarounds.
这篇关于index.ts中的导出自动排序使应用程序崩溃的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
