MFE 1将使用CustomElement angular/elements公开一些功能,包括一些html
MFE 2,它将使用这个远程MFE html。它将通过调用多个域特定的MFE来嵌入和创建。
以下是关于方法的一些细节:
MFE 1网络包配置
const singleSpaAngularWebpack =
require('single-spa-angular/lib/webpack').default;
const { merge } = require('webpack-merge');
const { EnvironmentPlugin } = require('webpack');
const { ModuleFederationPlugin } = require('webpack').container;
require('dotenv').config();
module.exports = (config, options) => {
const singleSpaWebpackConfig = singleSpaAngularWebpack(config, options);
return merge(singleSpaWebpackConfig, {
output: {
scriptType: 'text/javascript'
},
plugins: [new ModuleFederationPlugin({
name: 'mfe1',
filename: 'remoteEntry.js',
exposes: {
'./Module': 'src/app/app.module.ts',
}
}),
new EnvironmentPlugin(['ENVIRONMENT'])],
})
}
main.ts文件MF 2-调用远程MFE 1
import { loadRemoteEntry } from '@angular-architects/module-federation';
Promise.all([
loadRemoteEntry({
type: 'module',
remoteEntry: 'http://localhost:4206/remoteEntry.js',
}),
])
.catch((err) => console.error('Error loading remote entries', err))
.then(() => import('./bootstrap'))
.catch((err) => console.error(err));
我的MFE 2路由文件是
import { APP_BASE_HREF } from '@angular/common';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { EmptyRouteComponent } from './core/components/empty-route/empty-route.component';
import { loadRemoteModule } from '@angular-architects/module-federation';
const routes: Routes = [
{
path: 'test',
loadChildren: () =>
loadRemoteModule({
type: 'module',
remoteEntry: 'http://localhost:4206/remoteEntry.js',
exposedModule: './Module'
})
.then(m => m.MyModule)
},
{ path: '**', component: EmptyRouteComponent },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
providers: [{ provide: APP_BASE_HREF, useValue: '/' }],
})
export class AppRoutingModule {}
问题:
ngx-logger.mjs:607 2023-02- 19 T14:59:44.358Z ERROR [main.js:575:21]订单中的全局错误处理程序出错错误:未被捕获(在承诺中):TypeError:container.init不是一个函数TypeError:容器.init不是angular-architects-module-federation-runtime.mjs中的函数:27:1
ngx-logger.mjs:607 2023-02- 19 T14:59:44.363Z ERROR [main.js:575:21]订单中的全局错误处理程序出错错误:未被捕获(在承诺中):TypeError:container.get不是函数TypeError:container.get不是angular-architects-module-federation-runtime.mjs中的函数:10:1
会少什么呢?
1条答案
按热度按时间nuypyhwy1#
检查tslog.json中的lib数组,它使用的是es2020。以便为Angular 架构师使用正确的运行时。