Tengo una aplicación Vanilla JS y una aplicación Angular. Estoy tratando de vincular ambas aplicaciones mediante la federación de módulos, ambas en mi entorno local. El siguiente es el archivo de configuración del paquete web para la aplicación Vanilla js que actúa como control remoto
module.exports = { entry: ['./src/index.js'], output: { publicPath: config.get('publicPath') }, module: { rules: [ { test: /\.js$/, exclude: /(node_modules)/, use: ['babel-loader'], } ] }, plugins: [ new HTMLWebpackPlugin({ template: path.resolve(__dirname, 'demo/index.html') }), new ModuleFederationPlugin({ name: 'remote', exposes: { './createWidget': './src/index.js' } }), ], devServer: { host: "localhost.remote.org", port: 8080 } };Ejecuté el servidor de desarrollo webpack, por lo que presionar http://localhost.remote.org:8080/remote.js me dará el archivo. Este es el paquete web de mi aplicación Angular que consume la aplicación remota:
module.exports = { devtool: 'source-map', context: __dirname, entry: { polyfills: './src/polyfills.ts', main: './src/main.ts' }, ... ... plugins : [ new ModuleFederationPlugin({ name: "HostApp", remotes: { remote: "remote@http://localhost.finra.org:8080/remote.js", } }), ] }Tenga en cuenta que estoy tratando de importar la dependencia en mi archivo component.ts de la siguiente manera:
import * as Widget from 'remote/createWidget' Cuando ejecuto ng serve , aparece el error "módulo no encontrado". No estoy seguro de qué está fallando exactamente. ¿Cómo puedo arreglar esto?
Error: src/app/component1/component1.component.ts:30:28 - error TS2307: Cannot find module 'remote/createWidget' or its corresponding type declarations. 30 import * as Widget from 'remote/createWidget'