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';
未处理的承诺拒绝:错误:无法解析AuthGuard"的所有参数(未定义，路由器).确保所有参数都用 Inject 修饰或具有有效的类型注释，并且AuthGuard"用 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"
开发依赖:
"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.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屋！
