module-federation / module-federation-examples

Implementation examples of module federation , by the creators of module federation
https://module-federation.io/
MIT License
5.41k stars 1.71k forks source link

angular12-microfrontends error when no packages shared #2331

Closed koshdim closed 1 year ago

koshdim commented 1 year ago

if I clear 'shared' in both shell and profile, I get an error when navigate to microfrontend

plugins: [
    new ModuleFederationPlugin({
      name: 'profile',
      library: { type: 'var', name: 'profile' },
      filename: 'remoteEntry.js',
      exposes: {
        ProfileModule: './projects/mdmf-profile/src/app/profile/profile.module.ts',
      },
      shared: {
      },
    }),
  ],
plugins: [
    new ModuleFederationPlugin({
      shared: {
      },
    }),
  ],
ERROR Error: Uncaught (in promise): Error: inject() must be called from an injection context
Error: inject() must be called from an injection context
    at yD (441.js:1:26044)
    at Object.gt (441.js:1:26219)
    at d.ɵfac [as factory] (441.js:1:168088)
    at AE.hydrate (main.js:1:201332)
    at AE.get (main.js:1:199395)
    at main.js:1:199708
    at Set.forEach (<anonymous>)
    at AE._resolveInjectorDefTypes (main.js:1:199692)
    at new iS (main.js:1:230293)
    at hd.create (main.js:1:230989)
    at Ge (polyfills.js:1:162723)
    at Ge (polyfills.js:1:162219)
    at polyfills.js:1:163611
    at ce.invokeTask (polyfills.js:1:153753)
    at Object.onInvokeTask (main.js:1:235279)
    at ce.invokeTask (polyfills.js:1:153672)
    at _e.runTask (polyfills.js:1:149032)
    at Q (polyfills.js:1:155855)

I assume 'profile' misses some libraries and therefore is unable to load. how can I configure profile to include all it needs in remoteEntry.js?

koshdim commented 1 year ago

same with angular13 project, just the error is slightly different

main.js:1 ERROR Error: Uncaught (in promise): Error: NG0203
Error: NG0203
    at Eg (263.js:1:54171)
    at Object.Bt (263.js:1:54322)
    at d.ɵfac [as factory] (263.js:1:195691)
    at uv.hydrate (main.js:1:121536)
    at uv.get (main.js:1:119126)
    at main.js:1:119933
    at Set.forEach (<anonymous>)
    at uv._resolveInjectorDefTypes (main.js:1:119917)
    at new wp (main.js:1:136906)
    at Ul.create (main.js:1:137606)
    at q (polyfills.js:1:17670)
    at q (polyfills.js:1:17205)
    at polyfills.js:1:18515
    at v.invokeTask (polyfills.js:1:8244)
    at Object.onInvokeTask (main.js:1:151185)
    at v.invokeTask (polyfills.js:1:8165)
    at v.runTask (polyfills.js:1:3302)
    at A (polyfills.js:1:10634)
    at v.invokeTask [as invoke] (polyfills.js:1:9407)
    at g (polyfills.js:1:22992)
ScriptedAlchemy commented 1 year ago

Doesnt angular use a custom federation plugin? from angular architects?

File the bug with them, not a webpack issue

koshdim commented 1 year ago

angular12 example doesn't use angular architects package

koshdim commented 1 year ago

here is webpack-y error:

TypeError: _angular_core__WEBPACK_IMPORTED_MODULE_0__.InjectionToken is not a constructor
    4666 Angular
    Webpack 20
        __webpack_require__
        4497
        __webpack_require__
        8596
        __webpack_require__
        invoke
        run
        scheduleResolveOrReject
        invokeTask
        runTask
        drainMicroTaskQueue
        promise callback*scheduleMicroTask
        scheduleTask
        scheduleTask
        scheduleMicroTask
        scheduleResolveOrReject
        resolvePromise
        makeResolver
        webpackJsonpCallback
        <anonymous>

how do I investigate this? was module loaded, was all components of the module loaded?

ScriptedAlchemy commented 1 year ago

Looks like Babel transform maybe. Class getting converted into function call instead or true class