import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ModuleFederationPlugin } from 'webpack';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {
constructor() {
const mf = new ModuleFederationPlugin({
name: 'app',
remotes: {
remote: 'remote@http://localhost:3000/remoteEntry.js',
},
shared: ['@angular/core', '@angular/common', '@angular/router'],
});
// 将插件对象添加到webpack配置的plugins数组中
webpackConfig.plugins.push(mf);
}
}
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
publicPath: 'http://localhost:5000/',
},
plugins: [
new ModuleFederationPlugin({
name: 'remote',
filename: 'remoteEntry.js',
exposes: {
'./HelloComponent': './src/components/hello/hello.component.js',
},
shared: ['@angular/core', '@angular/common', '@angular/router'],
}),
],
};
Hello from remote component
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: ` `,
})
export class AppComponent {}
这些步