我已将我的应用程序从 Angular 9 升级到 Angular 10。升级过程很成功,我可以运行该应用程序。但是当我发出 ng serve
命令时,它显示以下警告。
WARNING in src\app\auth\guard\auth.guard.ts depends on 'lodash'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
WARNING in src\app\shared\services\api.service.ts depends on 'rxjs/Observable'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
WARNING in src\app\auth\guard\auth.guard.ts depends on 'rxjs/observable/fromPromise'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
WARNING in src\app\shared\services\localforage.service.ts depends on 'rxjs/observable/forkJoin'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
WARNING in src\app\auth\guard\auth.guard.ts depends on 'rxjs/add/operator/map'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
有一个变通办法,建议一些人将 commonJS 列入白名单,但它仍然会导致包大小增加。我怎样才能摆脱这个常见的 JS 问题并仍然获得优化的包大小?
PS: 带有map
操作符的最终代码
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { switchMap, tap, map } from 'rxjs/operators';
import { Observable, from} from 'rxjs';
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
return this.getToken().map((token: any) => {
if ((token !==null) && !this.jwtHelper.isTokenExpired(token.data)) {
// this.proactiveTokenRefresh(token);
return true;
}
// Store the attempted URL for redirecting
this.localForage.setItem('redirectUrl', state.url).then(() => {
// Navigate to the login page
this.router.navigate(['/login']);
return false;
});
});
}
private getToken(): Observable<{}> {
const token = this.localForage.getItem('id_token');
return from(token);
}`
最佳答案
根据警告,下面会有所帮助
- 请检查您从
rxjs
导入的所有内容
import {Observable, fromPromise} from 'rxjs'
import {map, forkJoin} from 'rxjs/operators'
还要注意像下面这样传递你的操作符
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { switchMap, tap, map } from 'rxjs/operators';
import { Observable, from} from 'rxjs';
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
return this.getToken().pipe(
map((token: any) => {
if ((token !==null) && !this.jwtHelper.isTokenExpired(token.data)) {
// this.proactiveTokenRefresh(token);
return true;
}
// Store the attempted URL for redirecting
this.localForage.setItem('redirectUrl', state.url).then(() => {
// Navigate to the login page
this.router.navigate(['/login']);
return false;
});
});
)
}
private getToken(): Observable<{}> {
const token = this.localForage.getItem('id_token');
return from(token);
}
- 对于
lodash
,尝试用各种 ES2015 可用函数替换 lodash 函数
关于angular - 升级到 Angular 10 后 rxjs 和 loadash CommonJS 或 AMD 依赖项优化警告,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63720587/