Webpack 5 Module federation : Unable to Import the Remote app

Question

I have a vanilla JS app and an Angular app. I am trying to link both these apps using module federation, both on my local environment. The following is webpack config file for vanilla js app which acts as remote

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
    }
};

I ran the webpack dev server, so hitting http://localhost.remote.org:8080/remote.js will give me the file. So this is the webpack of my Angular app which is consuming the remote app:

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",
            }
        }),
    ]
}

Note I am trying to import the dependency in my component.ts file as follows:

import * as Widget from 'remote/createWidget'

When I run ng serve, I get the "module not found" error. I'm not sure what exactly is going wrong. How can I fix this?

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'