fix(application-loader): remove debug logs, fix preload app load component (#153)

walkerkay · web-flow · commit 24413e6a164b · 2020-12-10T15:38:00.000+08:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,20 @@
 Changelog
 All notable changes to ngx-planet will be documented in this file.
 
+### [9.0.1-beta.6](https://github.com/worktile/ngx-planet/compare/9.0.1-beta.3...9.0.1-beta.6) (2020-12-10)
+
+
+### Bug Fixes
+
+* **application-loader:** fix preload app load component not display ([0a3abd2](https://github.com/worktile/ngx-planet/commit/0a3abd2f139bf66ed08587f87477d201414ddffa))
+
+### [9.0.1-beta.5](https://github.com/worktile/ngx-planet/compare/9.0.1-beta.3...9.0.1-beta.5) (2020-12-10)
+
+
+### Bug Fixes
+
+* **application-loader:** fix preload app load component not display ([0a3abd2](https://github.com/worktile/ngx-planet/commit/0a3abd2f139bf66ed08587f87477d201414ddffa))
+
 ### [9.0.1-beta.4](https://github.com/worktile/ngx-planet/compare/9.0.1-beta.3...9.0.1-beta.4) (2020-12-10)
 
 
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@worktile/planet",
-  "version": "9.0.1-beta.4",
+  "version": "9.0.1-beta.6",
   "description": "A powerful, reliable, fully-featured and production ready Micro Frontend library for Angular.",
   "keywords": [
     "micro front-end",
diff --git a/packages/planet/package.json b/packages/planet/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@worktile/planet",
-  "version": "9.0.1-beta.4",
+  "version": "9.0.1-beta.6",
   "private": false,
   "peerDependencies": {
     "@angular/common": "^9.0.0",
diff --git a/packages/planet/src/application/planet-application-loader.ts b/packages/planet/src/application/planet-application-loader.ts
@@ -3,7 +3,7 @@ import { of, Observable, Subject, forkJoin, from } from 'rxjs';
 import { AssetsLoader } from '../assets-loader';
 import { PlanetApplication, PlanetRouterEvent, SwitchModes, PlanetOptions } from '../planet.class';
 import { switchMap, share, map, tap, distinctUntilChanged, take, filter, catchError } from 'rxjs/operators';
-import { getHTMLElement, coerceArray, createElementByTemplate, debug } from '../helpers';
+import { getHTMLElement, coerceArray, createElementByTemplate } from '../helpers';
 import { PlanetApplicationRef } from './planet-application-ref';
 import { PlanetPortalApplication } from './portal-application';
 import { PlanetApplicationService } from './planet-application.service';
@@ -224,12 +224,12 @@ export class PlanetApplicationLoader {
                                 setTimeout(() => {
                                     // 此处判断是因为如果静态资源加载完毕还未启动被取消，还是会启动之前的应用，虽然可能性比较小，但是无法排除这种可能性，所以只有当 Event 是最后一个才会启动
                                     if (this.startRouteChangeEvent === event) {
-                                        this.ngZone.runOutsideAngular(() => {
-                                            forkJoin(apps$).subscribe(() => {
-                                                this.setLoadingDone();
-                                                this.ensurePreloadApps(apps);
-                                            });
+                                        // this.ngZone.runOutsideAngular(() => {
+                                        forkJoin(apps$).subscribe(() => {
+                                            this.setLoadingDone();
+                                            this.ensurePreloadApps(apps);
                                         });
+                                        // });
                                     }
                                 });
                             } else {
@@ -305,7 +305,6 @@ export class PlanetApplicationLoader {
         app: PlanetApplication,
         defaultStatus: 'hidden' | 'display' = 'display'
     ): Observable<PlanetApplicationRef> {
-        debug(`${app.name} start bootstrap`);
         this.setAppStatus(app, ApplicationStatus.bootstrapping);
         const appRef = getPlanetApplicationRef(app.name);
         if (appRef && appRef.bootstrap) {
@@ -333,7 +332,6 @@ export class PlanetApplicationLoader {
             }
             return result.pipe(
                 tap(() => {
-                    debug(`${app.name} bootstrapped`);
                     this.setAppStatus(app, ApplicationStatus.bootstrapped);
                     if (defaultStatus === 'display' && appRootElement) {
                         appRootElement.removeAttribute('style');
@@ -437,7 +435,6 @@ export class PlanetApplicationLoader {
     preload(app: PlanetApplication, directBootstrap?: boolean): Observable<PlanetApplicationRef> {
         const status = this.appsStatus.get(app);
         if (!status || status === ApplicationStatus.loadError) {
-            debug(`${app.name} start preloading`);
             return this.startLoadAppAssets(app).pipe(
                 switchMap(() => {
                     if (directBootstrap) {
@@ -446,7 +443,6 @@ export class PlanetApplicationLoader {
                         return this.ngZone.runOutsideAngular(() => {
                             return this.takeOneStable().pipe(
                                 switchMap(() => {
-                                    debug(`${app.name} start bootstrap on stable`);
                                     return this.bootstrapApp(app, 'hidden');
                                 })
                             );
@@ -468,12 +464,10 @@ export class PlanetApplicationLoader {
                 }),
                 take(1),
                 map(() => {
-                    debug(`${app.name} assets is loading or app is bootstrapped, return appRef`);
                     return getPlanetApplicationRef(app.name);
                 })
             );
         } else {
-            debug(`${app.name} status is '${status}' , return appRef`);
             return of(getPlanetApplicationRef(app.name));
         }
     }
diff --git a/packages/planet/src/assets-loader.ts b/packages/planet/src/assets-loader.ts
@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { hashCode, isEmpty, getScriptsAndStylesFullPaths, debug } from './helpers';
+import { hashCode, isEmpty, getScriptsAndStylesFullPaths } from './helpers';
 import { of, Observable, Observer, forkJoin, concat, merge } from 'rxjs';
 import { tap, shareReplay, map, switchMap, switchAll, concatMap, concatAll, scan, reduce } from 'rxjs/operators';
 import { HttpClient } from '@angular/common/http';
@@ -21,10 +21,8 @@ export class AssetsLoader {
     constructor(private http: HttpClient) {}
 
     loadScript(src: string): Observable<AssetsLoadResult> {
-        debug(`load '${src}' start`);
         const id = hashCode(src);
         if (this.loadedSources.includes(id)) {
-            debug(`load '${src}' successfully from cache`);
             return of({
                 src: src,
                 hashCode: id,
@@ -76,15 +74,12 @@ export class AssetsLoader {
                 observer.complete();
             };
             document.body.appendChild(script);
-            debug(`load '${src}' successfully`);
         });
     }
 
     loadStyle(src: string): Observable<AssetsLoadResult> {
-        debug(`load '${src}' start`);
         const id = hashCode(src);
         if (this.loadedSources.includes(id)) {
-            debug(`load '${src}' successfully from cache`);
             return of({
                 src: src,
                 hashCode: id,
@@ -120,7 +115,6 @@ export class AssetsLoader {
                 observer.complete();
             };
             head.appendChild(link);
-            debug(`load '${src}' successfully`);
         });
     }
 
@@ -174,10 +168,8 @@ export class AssetsLoader {
     }
 
     loadManifest(url: string): Observable<{ [key: string]: string }> {
-        debug(`load '${url}' start`);
         return this.http.get(url).pipe(
             map((response: any) => {
-                debug(`load '${url}' successfully`);
                 return response;
             })
         );
diff --git a/packages/planet/src/component/planet-component-loader.ts b/packages/planet/src/component/planet-component-loader.ts
@@ -3,7 +3,7 @@ import { ComponentType, DomPortalOutlet, ComponentPortal, PortalInjector } from
 import { PlanetApplicationRef } from '../application/planet-application-ref';
 import { PlanetComponentRef } from './planet-component-ref';
 import { PlantComponentConfig } from './plant-component.config';
-import { coerceArray, debug } from '../helpers';
+import { coerceArray } from '../helpers';
 import { delay, map, shareReplay, finalize } from 'rxjs/operators';
 import { of, Observable } from 'rxjs';
 import { DOCUMENT } from '@angular/common';
@@ -125,7 +125,6 @@ export class PlanetComponentLoader {
                 if (component) {
                     return this.ngZone.run(() => {
                         const componentRef = this.attachComponent<any>(component, appRef.appModuleRef, config);
-                        debug(`${app} component '${componentName}' loaded successfully`);
                         return componentRef;
                     });
                 } else {
@@ -142,7 +141,6 @@ export class PlanetComponentLoader {
     }
 
     load<TData = any>(app: string, componentName: string, config: PlantComponentConfig<TData>) {
-        debug(`start loading the component '${componentName}' of ${app}`);
         const result = this.getPlantAppRef(app).pipe(
             map(appRef => {
                 const componentFactory = appRef.getComponentFactory();
diff --git a/packages/planet/src/helpers.ts b/packages/planet/src/helpers.ts
@@ -1,10 +1,7 @@
 import { PlanetApplication } from './planet.class';
-import _debug from 'debug';
 
 const ELEMENT_NODE_TYPE = 1;
 
-export const debug = _debug('planet');
-
 export function hashCode(str: string): number {
     let hash = 0;
     let chr: number;

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@worktile/planet",`
`3`		`- "version": "9.0.1-beta.4",`
	`3`	`+ "version": "9.0.1-beta.6",`
`4`	`4`	`"description": "A powerful, reliable, fully-featured and production ready Micro Frontend library for Angular.",`
`5`	`5`	`"keywords": [`
`6`	`6`	`"micro front-end",`