add mirco component bus

Author: xlorne

admin-pro-ui/src/pages/mirco/index.tsx

@@ -1,5 +1,5 @@
 import React, {useState} from "react";
-import {Button, Space} from "antd";
+import {Button, message, Space} from "antd";
 import ComponentBus from "@/framework/ComponentBus";
 import {HeaderProps} from "@/gateway";
 import HeaderDefault from "@/gateway/default/Header";
@@ -22,6 +22,10 @@ const MircoPage = () => {
         const {remoteUrl, scope, module} = values;
         ComponentBus.getInstance()
             .registerRemoteComponent(HeaderKey, remoteUrl, scope, module)
+            .catch(error=>{
+                console.error("load remote component error", error);
+                message.error('load remote component error');
+            })
             .finally(() => {
                 setVisible(false);
             });
@@ -35,8 +39,8 @@ const MircoPage = () => {
                 <Space>
                     <Button onClick={() => {
                         form.setFieldsValue({
-                            remoteUrl: "http://localhost:4000/remoteEntry.js",
-                            scope: "MircoApp2",
+                            remoteUrl: "http://localhost:3000/remoteEntry.js",
+                            scope: "MircoApp",
                             module: "./Header"
                         })
                         setVisible(true);

admin-pro-ui/webpack.config.dev.js

@@ -4,7 +4,7 @@ const common = require('./webpack.common.js');
 module.exports = merge(common, {
     mode: 'development',
     devServer: {
-        port: 3000,
+        port: 8000,
 
         proxy: [
             {

admin-pro-ui/webpack.config.mock.js

@@ -7,7 +7,7 @@ const express = require('express');
 module.exports = merge(common, {
     mode: 'development',
     devServer: {
-        port: 3000,
+        port: 8000,
 
         setupMiddlewares: (middlewares, devServer) => {
             if (!devServer) {

admin-pro-ui/webpack.config.prod.js

@@ -4,6 +4,6 @@ const common = require('./webpack.common.js');
 module.exports = merge(common,{
     mode: 'production',
     devServer: {
-        port: 13000,
+        port: 8000,
     },
 });