开发模式下主应用如何加载使用lazyload的子应用

ywager commented 6 years ago

For Angular Lazyload Module

inline.bundle.js will load script for / path.

So, just copy *.chunk.js files to dist/, then deploy it.

以上是针对生产环境环境下的配置，测试OK。如果是开发环境*.chunk.js需要拷贝到哪个目录，才能成功加载使用lazyload的子应用？

phodal commented 6 years ago

这里的 *.chunk.js 需要拷贝到主应用的 assets 目录里。

Mooa 在设计的时候没有针对子应用的情况考虑。就现在的情况来看，iframe 模式应该有两种做法：

复制 *.chunk.js
独立部署子应用，然后由 iframe 指定这个应用

ywager commented 6 years ago

Hi Phodal，谢谢您的回复。这里的 .chunk.js 需要拷贝到主应用的 assets 目录里。 // 用开发模式即ng serve启动主应用时，加载子应用.chunk.js也是用的"/"路径例如: Request URL:http://localhost:4200/0.4713efcc5d1961c449e7.chunk.js Request Method:GET Status Code:404 Not Found

2.独立部署子应用，然后由 iframe 指定这个应用 // 独立部署子应用后，需要怎么在主应用加载这个子应用？

phodal commented 6 years ago

不好意思，之前看错了。

实现 1，在开发环境需要打包，然后到 dist 目录运行一个 HTTP Server。

实现 2，这个功能还没有实现，但是改起来比较方便：export function createApplicationIframeContainer(mooaApp: MooaApp)

除了此，应该可以用 ng eject，然后修改 webpack 的 chunk 插件的构建就可以了。

ywager commented 6 years ago

Hi phodal, 多谢，按照您的思路，我先试一试.

kisslove commented 5 years ago

@phodal 对于Angular Lazyload Module，我发现你这边重复定义了，iframe里面的html页下的和在子应用中使用DI(依赖注入的方式)去修改应用的APP_BASE_HREF，后者是不起作用的，因为入口页面已经有。因此建议：应该注释源码中相应代码，就不需要将异步加载的模块代码复制到根目录下。

function createApplicationIframeContainer(mooaApp) {
    var opts = mooaApp.appConfig;
    if (mooaApp.switchMode === 'coexist') {
        var iframeElement = isIframeElementExist(mooaApp);
        if (iframeElement) {
            iframeElement.style.display = 'block';
            return iframeElement;
        }
    }
    var iframe = document.createElement('iframe');
    iframe.frameBorder = '';
    iframe.width = '100%';
    iframe.height = '100%';
    iframe.src = window.location.origin + '/assets/iframe.html';
    iframe.id = generateIFrameID(mooaApp.appConfig.name);
    var el = document.createElement(opts.selector);
    if (opts.parentElement) {
        var parentEl = document.querySelector(opts.parentElement);
        if (parentEl) {
            parentEl.appendChild(iframe);
        }
    }
    else {
        document.body.appendChild(iframe);
    }
    var iframeEl = document.getElementById(iframe.id);
    iframeEl.contentWindow.document.write('<div></div>');
    iframeEl.contentWindow.document.body.appendChild(el);
    //注释此代码
    // iframeEl.contentWindow.document.head.innerHTML =
    //     iframeEl.contentWindow.document.head.innerHTML + "<base href='/' />";
    iframeEl.contentWindow.mooa = {
        isSingleSpa: true
    };
    iframeEl.contentWindow.addEventListener(MOOA_EVENT.ROUTING_NAVIGATE, function (event) {
        if (event.detail) {
            navigateAppByName(event.detail);
        }
    });
}

phodal commented 5 years ago

@kisslove 欢迎来 Pull Request

kisslove commented 5 years ago

@phodal 我这边也是在研究微前端的时候，发现你的项目，我们项目打算尝试使用一下

phodal commented 5 years ago

@kisslove 哈哈，欢迎来意见，这个框架是我们去年研究的时候写的——很多东西，我都忘了。

原来是这里有个坑，我原以为要去修改 webpack。

kisslove commented 5 years ago

@phodal 你们项目中有使用这套框架吗，需要更多的人来维护，这个才活跃的起来哦

phodal commented 5 years ago

哈哈，我们的客户不打算用这个框架。

因为用的人少，而且 issue 也少，欢迎试坑交流。

kisslove commented 5 years ago

@phodal ，哈哈。好的，目前框架搭起来，我需要测试一下，再来评估。填完的坑，我后面提pull request,你那边也可以看看

benben22 commented 5 years ago

@phodal 你好，请问mooa框架请适用手机端吗，ionic4、ionic3+angular移动混合项目

phodal commented 5 years ago

@benben22 理论上，用 Angular 写的都可以

phodal commented 4 years ago

please try https://github.com/worktile/ngx-planet

phodal / mooa

开发模式下主应用如何加载使用lazyload的子应用 #4