title: rxjs and loadash CommonJS or AMD dependencies optimization warnings after upgrading to Angular 10
body: <p>I have upgraded my application from Angular 9 to Angular 10. The upgrade process has been auccessful and I am able to run the application. But when i issue the <code>ng serve</code> command, it is showing the following warnings.</p>
  <pre><code>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
  </code></pre>
  <p>There is a work around that some of the people are suggested by whitelisting the commonJS, but still it will cause the increase in bundle size. How can I get rid of this common JS problem and still get an optimized bundle size ?</p>
  <p>PS: The final code with <code>map</code> operator</p>
  <pre><code>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&lt;boolean&gt; {
  
          return this.getToken().map((token: any) =&gt; {
              if ((token !==null) &amp;&amp; !this.jwtHelper.isTokenExpired(token.data)) {
                 // this.proactiveTokenRefresh(token);
                  return true;
              } 
              
              // Store the attempted URL for redirecting
              this.localForage.setItem('redirectUrl', state.url).then(() =&gt; {
                  // Navigate to the login page
                  this.router.navigate(['/login']);
                  return false;
              });
          });
  }
      
  private getToken(): Observable&lt;{}&gt; {
      const token = this.localForage.getItem('id_token');
      
      return from(token);
  }`
  </code></pre>