ThyTooltipDirective issue when startup micro-frontend

Describe the bug

使用ngx-planet，把example例子分割成三个独立的repository：Portal, App1, App2，启动后App1和App2都报错。

加载资源失败

To Reproduce

Steps to reproduce the behavior:

启动三个repository，registerApps没有注册成功

Expected behavior

三个repository分别开发部署，分别的runtime，最终在portal(3000)里面可以动态集成

Screenshots

页面：
1. portal->about

app1(app2也报这个错):

Console(portal, app1 and app2都报这个错)：

Desktop (please complete the following information):

OS: [MAC OS]
Browser [chrome，firefox]

Smartphone (please complete the following information):

N/A

Additional context

portal-package.json:

"dependencies": { "@angular/animations": "~10.1.5", "@angular/cdk": "^10.2.7", "@angular/common": "~10.1.5", "@angular/compiler": "~10.1.5", "@angular/core": "~10.1.5", "@angular/forms": "~10.1.5", "@angular/platform-browser": "~10.1.5", "@angular/platform-browser-dynamic": "~10.1.5", "@angular/router": "~10.1.5", "@worktile/planet": "^9.0.1-beta.0", "bootstrap": "4.3.1", "date-fns": "^2.16.1", "ngx-tethys": "9.0.0-beta.2", "rxjs": "~6.6.0", "sortablejs": "1.8.4", "tslib": "^2.0.0", "zone.js": "~0.10.2" }, "devDependencies": { "@angular-builders/custom-webpack": "^10.0.1", "@angular-devkit/architect": "^0.1100.3", "@angular-devkit/build-angular": "~0.1001.6", "@angular-devkit/build-ng-packagr": "^0.1002.0", "@angular/cli": "~10.1.6", "@angular/compiler-cli": "~10.1.5", "@angular/language-service": "^11.0.3", "@types/jasmine": "~3.5.0", "@types/jasminewd2": "~2.0.3", "@types/node": "^12.11.1", "codelyzer": "^6.0.0", "jasmine-core": "~3.6.0", "jasmine-spec-reporter": "~5.0.0", "karma": "~5.0.0", "karma-chrome-launcher": "~3.1.0", "karma-coverage-istanbul-reporter": "~3.0.2", "karma-jasmine": "~4.0.0", "karma-jasmine-html-reporter": "^1.5.0", "mini-css-extract-plugin": "^0.5.0", "ng-packagr": "^10.1.2", "node-sass": "^4.13.1", "npm-run-all": "^4.1.5", "postcss-loader": "^3.0.0", "prettier": "^1.16.4", "pretty-quick": "^1.10.0", "protractor": "~7.0.0", "standard-version": "^8.0.1", "style-loader": "^0.23.1", "ts-node": "~8.3.0", "tslint": "~6.1.0", "typescript": "~4.0.2", "webpack-assets-manifest": "^3.1.1" }

app.components.ts:

ngOnInit() {
    this.planet.setOptions({
        switchMode: SwitchModes.coexist,
        errorHandler: error => {
            this.thyNotify.error(`错误`, '加载资源失败');
        }
    });

    this.appRootContext.setName(`my name is app root context`);

    this.planet.setPortalAppData({
        appRootContext: this.appRootContext
    });

    const appHostClass = 'thy-layout';

    const settings = this.customSettingsService.get();
    this.planet.registerApps([
        {
            name: 'app1',
            hostParent: '#app-host-container',
            hostClass: appHostClass,
            routerPathPrefix: '/app1',
            resourcePathPrefix: '/static/app1/',
            preload: settings.app1.preload,
            switchMode: settings.app1.switchMode,
            loadSerial: true,
            // prettier-ignore
            scripts: [
            //   'main.js',
            //   // 'polyfills.js'
            ],
            styles: [],
            manifest: '',
            extra: {
                name: '应用1',
                color: '#ffa415'
            }
        },
        {
            name: 'app2',
            hostParent: '#app-host-container',
            hostClass: appHostClass,
            routerPathPrefix: '/app2',
            resourcePathPrefix: '/static/app2/',
            preload: settings.app2.preload,
            switchMode: settings.app2.switchMode,
            // prettier-ignore
            scripts: [
              // '/static/app2/main.js'
            ],
            styles: [],
            manifest: '',
            extra: {
                name: '应用2',
                color: '#66c060'
            }
        }
    ]);

    this.planet.start();

    this.globalEventDispatcher.register('openADetail').subscribe(event => {
        this.thyDialog.open(ADetailComponent);
    });

    this.planet.appsLoadingStart.subscribe(event => {
        this.activeAppNames = event.shouldLoadApps.map(item => item.name);
        console.log(`active app names: ${this.activeAppNames.join(',')}`);
    });
}

angular.json:

...... "architect": { "build": { "builder": "@angular-builders/custom-webpack:browser", "options": { "customWebpackConfig": { "path": "./extra-webpack.config.js", "mergeStrategies": { "externals": "replace" } }, "outputPath": "dist/dcp-microfe-framework-poc-ng-main", "index": "src/index.html", "main": "src/main.ts", "polyfills": "src/polyfills.ts", "tsConfig": "tsconfig.app.json",

......

    "serve": {
      "builder": "@angular-builders/custom-webpack:dev-server",
      "options": {
        "browserTarget": "dcp-microfe-framework-poc-ng-main:build",
        "proxyConfig": "proxy.conf.js",
        "port": 3000
      },
      "configurations": {
        "production": {
          "browserTarget": "dcp-microfe-framework-poc-ng-main:build:production"
        }
      }
    },

......

proxy.conf.js:

const PROXY_CONFIG = {};

PROXY_CONFIG['/static/app1'] = { target: 'http://localhost:3001', secure: false, changeOrigin: false };

PROXY_CONFIG['/static/app2'] = { target: 'http://localhost:3002', secure: false, changeOrigin: false };

module.exports = PROXY_CONFIG;

App1 ---- main.ts:

if (environment.production) { enableProdMode(); } defineApplication('app1', { template: <dcp-mfe-app1-root class="app1-root"></dcp-mfe-app1-root>, bootstrap: (portalApp: PlanetPortalApplication) => { return platformBrowserDynamic([ { provide: PlanetPortalApplication, useValue: portalApp, }, { provide: AppRootContext, useValue: portalApp.data.appRootContext, }, ]) .bootstrapModule(AppModule) .then((appModule) => { return appModule; }) .catch((error) => { console.error(error); return null; }); }, });

如果需要其他信息或者repository，请联系。

worktile / ngx-planet