[英]In Angular module federation, how do I expose/access the application component of my remote module?
I'm using Angular 14 and module federation.我正在使用 Angular 14 和模块联合。 I would like to know how to access my remote module's application component from my shell application.我想知道如何从我的 shell 应用程序访问我的远程模块的应用程序组件。 In my remote module, I have this webconfig.config.js set up在我的远程模块中,我设置了这个 webconfig.config.js
const { shareAll, withModuleFederationPlugin } = require('@angular-architects/module-federation/webpack');
module.exports = withModuleFederationPlugin({
name: 'productlist',
exposes: {
'./Component': './src/app/app.component.ts',
'./home':'./src/app/my-module/my-module.module.ts'
},
shared: {
...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
},
});
In my src/app/app.component.ts file I have在我的 src/app/app.component.ts 文件中我有
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'myco-ui-productlist';
}
and my src/app/app.component.html file looks like我的 src/app/app.component.html 文件看起来像
<router-outlet></router-outlet>
In my shell application, I have this in my webpack.config.js在我的 shell 应用程序中,我的 webpack.config.js 中有这个
module.exports = withModuleFederationPlugin({
name: 'shell',
remotes: {
"productlist": "http://localhost:8001/remoteEntry.js",
},
and this set up for my routes这是为我的路线设置的
const routes: Routes = [
{
path: '',
component: HomeComponent,
children: [
...
{
path: 'products-list',
loadChildren: () => import('productlist/Component').then(m => m.ProductListsModule)
}
],
}
]
but in my shell application, when I go to the specified route (/products-list), I get this JS error但是在我的 shell 应用程序中,当我 go 到指定的路由(/products-list)时,我得到这个 JS 错误
ERROR Error: Uncaught (in promise): TypeError: type is undefined
getNgModuleDef@http://localhost:8000/node_modules_angular_core_fesm2020_core_mjs.js:1675:23
NgModuleRef@http://localhost:8000/node_modules_angular_core_fesm2020_core_mjs.js:25461:39
create@http://localhost:8000/node_modules_angular_core_fesm2020_core_mjs.js:25505:12
loadChildren/loadRunner<@http://localhost:8000/node_modules_angular_router_fesm2020_router_mjs-_6f000.js:5634:36
map/</<@http://localhost:8000/node_modules_rxjs_dist_esm_operators_index_js.js:3325:31
OperatorSubscriber/this._next<@http://localhost:8000/node_modules_rxjs_dist_esm_operators_index_js.js:1777:15
next@http://localhost:8000/node_modules_rxjs_dist_esm_operators_index_js.js:748:12
doInnerSub/<@http://localhost:8000/node_modules_rxjs_dist_esm_operators_index_js.js:3493:20
OperatorSubscriber/this._next<@http://localhost:8000/node_modules_rxjs_dist_esm_operators_index_js.js:1777:15
next@http://localhost:8000/node_modules_rxjs_dist_esm_operators_index_js.js:748:12
fromPromise/</<@http://localhost:8000/node_modules_rxjs_dist_esm_operators_index_js.js:1468:20
invoke@http://localhost:8000/polyfills.js:8158:158
onInvoke@http://localhost:8000/node_modules_angular_core_fesm2020_core_mjs.js:30816:25
invoke@http://localhost:8000/polyfills.js:8158:46
run@http://localhost:8000/polyfills.js:7899:35
scheduleResolveOrReject/<@http://localhost:8000/polyfills.js:9243:28
invokeTask@http://localhost:8000/polyfills.js:8191:171
onInvokeTask@http://localhost:8000/node_modules_angular_core_fesm2020_core_mjs.js:30804:25
invokeTask@http://localhost:8000/polyfills.js:8191:54
runTask@http://localhost:8000/polyfills.js:7952:37
drainMicroTaskQueue@http://localhost:8000/polyfills.js:8400:23
promise callback*nativeScheduleMicroTask@http://localhost:8000/polyfills.js:8371:18
scheduleMicroTask@http://localhost:8000/polyfills.js:8382:30
scheduleTask@http://localhost:8000/polyfills.js:8181:28
onScheduleTask@http://localhost:8000/polyfills.js:8079:61
scheduleTask@http://localhost:8000/polyfills.js:8174:43
scheduleTask@http://localhost:8000/polyfills.js:8000:35
scheduleMicroTask@http://localhost:8000/polyfills.js:8025:19
scheduleResolveOrReject@http://localhost:8000/polyfills.js:9231:10
resolvePromise@http://localhost:8000/polyfills.js:9159:34
makeResolver/<@http://localhost:8000/polyfills.js:9065:23
wrapper/<@http://localhost:8000/polyfills.js:9082:25
webpackJsonpCallback@http://localhost:8001/remoteEntry.js:8793:41
@http://localhost:8001/src_app_app_component_ts.js:1:105
and nothing loads.没有任何负载。 What else do I need to do to expose the remote module's application component and load it successfully?我还需要做什么来暴露远程模块的应用程序组件并成功加载它?
In your routes setting you are not calling loadRemoteModule.在您的路线设置中,您没有调用 loadRemoteModule。 Should be something like this:应该是这样的:
path: 'products-list',
loadChildren: () =>
loadRemoteModule({
type: 'module',
remoteEntry: 'http://localhost:8001/remoteEntry.js',
exposedModule: './ProductListsModule',
}).then(m => m.ProductListsModule)),
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.