Question

我已将应用程序从Angular 9升级到了Angular10。升级过程已成功完成，我能够运行该应用程序。但是当我发出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);
}`

Answer 1

从警告中，下面将有帮助

请检查您从let blob = new Blob(["blob:http://localhost/166d7686-4500-4a4a-993f-3b743d3afcb4"], { type: "video/webm" }); // The full Blob Object can be seen // in the Console of the Browser console.log('Blob - ', blob); var reader = new FileReader(); reader.readAsDataURL(blob); reader.onloadend = function () { var base64String = reader.result; console.log('Base64 String - ', base64String); // Simply Print the Base64 Encoded String, // without additional data: Attributes. console.log('Base64 String without Tags- ',base64String.substr(base64String.indexOf(', ') + 1)); }进口的所有货物

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); }，请尝试使用各种ES2015可用函数替换lodash函数

升级到Angular 10后rxjs和loadash CommonJS或AMD依赖关系优化警告

1 个答案: