在我的配置中,我目前正在使用一个 shell 应用程序和一个遥控器,两者都是用 angular 12.2.0 编写的,我遇到了一个我不知道如何解决的问题。
外壳 webpack.config.js
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const mf = require("@angular-architects/module-federation/webpack");
const path = require("path");
const share = mf.share;
const sharedMappings = new mf.SharedMappings();
sharedMappings.register(
path.join(__dirname, '../../tsconfig.json'),
['auth-lib']
);
module.exports = {
output: {
uniqueName: "portal",
publicPath: "auto"
},
optimization: {
runtimeChunk: false
},
resolve: {
alias: {
...sharedMappings.getAliases(),
}
},
plugins: [
new ModuleFederationPlugin({
// For hosts (please adjust)
remotes: {
"myremote": "myremote@http://localhost:4250/remoteEntry.js"
},
shared: share({
"@angular/core": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
"@angular/common": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
"@angular/common/http": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
"@angular/router": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
...sharedMappings.getDescriptors()
})
}),
sharedMappings.getPlugin()
],
};
远程 webpack.config.js
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const mf = require("@angular-architects/module-federation/webpack");
const path = require("path");
const share = mf.share;
const sharedMappings = new mf.SharedMappings();
sharedMappings.register(
path.join(__dirname, 'tsconfig.json'),
[/* mapped paths to share */]
);
module.exports = {
output: {
uniqueName: "interviews",
publicPath: "auto"
},
optimization: {
runtimeChunk: false
},
resolve: {
alias: {
...sharedMappings.getAliases(),
}
},
plugins: [
new ModuleFederationPlugin({
// For remotes (please adjust)
name: "myremote",
filename: "remoteEntry.js",
exposes: {
'./Module': './src/app/myremote/myremote.module.ts'
},
shared: share({
"@angular/core": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
"@angular/common": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
"@angular/common/http": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
"@angular/router": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
...sharedMappings.getDescriptors()
})
}),
sharedMappings.getPlugin()
],
};
当我在 shell 应用程序中使用对远程模块的引用时,一切正常,如下所示:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './components/home/home.component';
const routes: Routes = [{
path: '',
component: HomeComponent,
pathMatch: 'full'
}, {
path: 'myremote',
loadChildren: () => import('myremote/Module').then(m => m.MyRemoteModule)
}];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
当远程模块的组件在其代码中实例化一个新的 Web Worker 时,就会出现问题,如下所示:
const myWorker = new Worker(
new URL('../path/to/workers/worker.ts',
import.meta.url
),
{ type: 'module', name: 'my-worker' }
);
// since I'm also using comlink, I also do that, but that's not really relevant here
this.worker = this.createWrapper<WorkerService>(myWorker);
上面的代码,在 Webpack 5 中,已经在我的应用程序中生成了一个名为 my-worker.js 的单独包,它既不是组件的一部分,也不是模块的包。因此,将模块暴露给模块联合,也不会暴露到 remoteEntry.js 以及工作人员的代码。然后尝试使用 shell 应用程序导航到加载我的遥控器的路线,将出错并通知:
错误错误:未捕获(承诺):SecurityError:无法构造“Worker”:无法从源“http://localhost:5000”访问“http://localhost:4250/my-worker.js”处的脚本。错误:无法构造“Worker”:无法从源“http://localhost:5000”访问“http://localhost:4250/my-worker.js”处的脚本。
所以问题是,如果我想要一个遥控器并公开它的模块以在 shell 应用程序中使用,并且它的一个模块使用 Web Worker,我如何确保由 Webpack 创建的单独的工作包也被公开为了让shell应用程序能够实例化它?