search

angular-architects / module-federation-plugin

MIT License
718 stars 194 forks source link

Getting 404 for all imports #651

Open abhinavek opened 5 days ago

abhinavek commented 5 days ago

I have converted an existing angular repo to shell app using ng g @angular-architects/native-federation:init --port 4220 --type dynamic-host commant and successfuly converted and app running fine no errors in console. but in browser console i am getting import 404 errrors

image

below is my package.json

{
  "name": "host-app-fe",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "sonar": "sonar-scanner"
  },
  "private": true,
  "dependencies": {
    "@angular-architects/native-federation": "^17.1.0",
    "@angular/animations": "^17.2.0",
    "@angular/cdk": "^17.2.0",
    "@angular/common": "^17.2.0",
    "@angular/compiler": "^17.2.0",
    "@angular/core": "^17.2.0",
    "@angular/forms": "^17.2.0",
    "@angular/material": "^17.3.10",
    "@angular/platform-browser": "^17.3.12",
    "@angular/platform-browser-dynamic": "^17.2.0",
    "@angular/platform-server": "^17.3.11",
    "@angular/router": "^17.2.0",
    "@angular/ssr": "^17.3.2",
    "@ant-design/icons-angular": "^17.0.0",
    "@fortawesome/fontawesome-free": "^6.5.2",
    "@types/leaflet": "^1.9.12",
    "angular-split": "^17.2.0",
    "autoprefixer": "^10.4.19",
    "bootstrap": "^5.3.3",
    "cron-parser": "^4.9.0",
    "dagre-compound": "^0.0.13",
    "es-module-shims": "^1.5.12",
    "express": "^4.18.2",
    "jquery": "^3.7.1",
    "json-server": "^1.0.0-alpha.23",
    "konva": "^9.3.8",
    "leaflet": "^1.9.4",
    "ng-zorro-antd": "^17.4.0",
    "ngx-loading": "^17.0.0",
    "ngx-select-dropdown": "^3.3.2",
    "ngx-spinner": "^17.0.0",
    "ngx-toastr": "^19.0.0",
    "popper.js": "^1.16.1",
    "postcss": "^8.4.38",
    "rxjs": "~7.8.0",
    "sonarqube-scanner": "^3.4.0",
    "tailwindcss": "^3.4.3",
    "tippy.js": "^6.3.7",
    "tslib": "^2.3.0",
    "web-animations-js": "^2.3.2",
    "zone.js": "~0.14.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^17.3.9",
    "@angular/cli": "^17.2.3",
    "@angular/compiler-cli": "^17.2.0",
    "@types/jasmine": "~5.1.0",
    "@types/node": "^20.12.7",
    "jasmine-core": "~5.1.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "sonar-scanner": "^3.1.0",
    "typescript": "~5.3.2"
  },
  "optionalDependencies": {
    "@rollup/rollup-linux-x64-gnu": "4.9.5"
  }
}
abhinavek commented 5 days ago 
X [ERROR] Could not resolve "canvas"

    node_modules/konva/lib/index-node.js:4:23:
      4 │ const Canvas = require("canvas");
        ╵                        ~~~~~~~~

  You can mark the path "canvas" as external to exclude it from the bundle, which will remove this
  error and leave the unresolved path in the bundle. You can also surround this "require" call with
  a try/catch block to handle this failure at run-time instead of bundle-time.

1 of 102 errors shown (disable the message limit with --log-limit=0)
 ERR!  Error bundling shared npm package 
 ERR!  Build failed with 102 errors:
 ERR!  node_modules/@nodelib/fs.scandir/out/adapters/fs.js:4:19: ERROR: Could not resolve "fs"
 ERR!  node_modules/@nodelib/fs.scandir/out/settings.js:3:21: ERROR: Could not resolve "path"
 ERR!  node_modules/@nodelib/fs.stat/out/adapters/fs.js:4:19: ERROR: Could not resolve "fs"
 ERR!  node_modules/@nodelib/fs.walk/out/providers/stream.js:3:25: ERROR: Could not resolve "stream"
 ERR!  node_modules/@nodelib/fs.walk/out/settings.js:3:21: ERROR: Could not resolve "path"
 ERR!  ...
 ERR!  For more information, run in verbose mode
 NOTE 
 NOTE 
 NOTE  ** Important Information: ***
 NOTE  The error message above shows an issue with bundling a node_module.
 NOTE  In most cases this is because you (indirectly) shared a Node.js package,
 NOTE  while Native Federation builds for the browser.
 NOTE  You can move such packages into devDependencies or skip them in your federation.config.js.
 NOTE 
 NOTE  More Details: https://bit.ly/nf-issue
 NOTE 
 NOTE

getting above errors in console while running app using ng serve

JuNe98 commented 4 days ago

Where is your remote running? Is there a second app running configured as remote on localhost:3000? Can you please share your federation.config.js file?

abhinavek commented 4 days ago

Remote app also getting same error

 INFO  Building federation artefacts
 WARN  No entry point found for json-server
 WARN  If you don't need this package, skip it in your federation.config.js or consider moving it into depDependencies in your package.json
 WARN  No meta data found for shared lib json-server
 INFO  Preparing shared npm packages
 NOTE  This only needs to be done once, as results are cached
 NOTE  Skip packages you don't want to share in your federation config
X [ERROR] Could not resolve "canvas"

    node_modules/konva/lib/index-node.js:4:23:
      4 │ const Canvas = require("canvas");
        ╵                        ~~~~~~~~

  You can mark the path "canvas" as external to exclude it from the bundle, which will remove this
  error and leave the unresolved path in the bundle. You can also surround this "require" call with        
  a try/catch block to handle this failure at run-time instead of bundle-time.

1 of 102 errors shown (disable the message limit with --log-limit=0)
 ERR!  Error bundling shared npm package 
 ERR!  Build failed with 102 errors:
 ERR!  node_modules/@nodelib/fs.scandir/out/adapters/fs.js:4:19: ERROR: Could not resolve "fs"
 ERR!  node_modules/@nodelib/fs.scandir/out/settings.js:3:21: ERROR: Could not resolve "path"
 ERR!  node_modules/@nodelib/fs.stat/out/adapters/fs.js:4:19: ERROR: Could not resolve "fs"
 ERR!  node_modules/@nodelib/fs.walk/out/providers/stream.js:3:25: ERROR: Could not resolve "stream"       
 ERR!  node_modules/@nodelib/fs.walk/out/settings.js:3:21: ERROR: Could not resolve "path"
 ERR!  ...
 ERR!  For more information, run in verbose mode
 NOTE 
 NOTE 
 NOTE  ** Important Information: ***
 NOTE  The error message above shows an issue with bundling a node_module.
 NOTE  In most cases this is because you (indirectly) shared a Node.js package,
 NOTE  while Native Federation builds for the browser.
 NOTE  You can move such packages into devDependencies or skip them in your federation.config.js.
 NOTE 
 NOTE  More Details: https://bit.ly/nf-issue
 NOTE 
 NOTE 
Initial chunk files | Names          |  Raw size
styles.css          | styles         |   1.80 MB | 
scripts.js          | scripts        | 202.32 kB | 
polyfills.js        | polyfills      | 190.65 kB | 
main.js             | main           | 251 bytes | 

                    | Initial total  |   2.18 MB

Lazy chunk files    | Names          |  Raw size
chunk-W7BHCA2L.js   | lists-module   |  17.73 kB | 
chunk-3XF6V6UT.js   | bootstrap      |  14.53 kB | 
chunk-JVUHT3BT.js   | -              |   2.89 kB | 
chunk-233JND4H.js   | auth-component |   1.00 kB | 

Application bundle generation complete. [3.997 seconds]

Watch mode enabled. Watching for file changes...
Re-optimizing dependencies because lockfile has changed
  ➜  Local:   http://localhost:4201/
  ➜  press h + enter to show help
abhinavek commented 4 days ago

if i am removing ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }), this line from federation.config.js then app is running. and if i am routing to a mfe from shell i am getting below error

chunk-J4B6MK7R.js?v=af5cb44f:48 ERROR RuntimeError: NG0203: inject() must be called from an injection context such as a constructor, a factory function, a field initializer, or a function used with `runInInjectionContext`. Find more at https://angular.io/errors/NG0203
    at injectInjectorOnly (core.mjs:1093:15)
    at ɵɵinject (core.mjs:1106:42)
    at Object.factory (core.mjs:27822:46)
    at core.mjs:3219:47
    at runInInjectorProfilerContext (core.mjs:866:9)
    at R3Injector.hydrate (core.mjs:3218:21)
    at R3Injector.get (core.mjs:3082:33)
    at definition.getStandaloneInjector (core.mjs:27838:31)
    at ComponentFactory.create (core.mjs:15776:39)
    at ViewContainerRef2.createComponent (core.mjs:16265:47)
Promise.then        
step    @   chunk-J4B6MK7R.js?v=af5cb44f:48
fulfilled   @   chunk-J4B6MK7R.js?v=af5cb44f:36
Zone - Promise.then     
step    @   chunk-J4B6MK7R.js?v=af5cb44f:48
(anonymous) @   chunk-J4B6MK7R.js?v=af5cb44f:49
__async @   chunk-J4B6MK7R.js?v=af5cb44f:33
loadComponent   @   app.routes.ts:14
Zone - Promise.then     
sidenavigation  @   sidenav.component.ts:51
SidenavComponent_For_5_Conditional_2_Template_a_click_0_listener    @   sidenav.component.html:98
Zone - HTMLAnchorElement.addEventListener:click     
SidenavComponent_For_5_Conditional_2_Template   @   sidenav.component.html:97
SidenavComponent_For_5_Template @   sidenav.component.html:13
load        
ngOnInit    @   sidenav.component.ts:32
Zone - Promise.then     
(anonymous) @   bootstrap.ts:5
JuNe98 commented 3 days ago

Did you try to add konva and canvas add to the skip section in your federation.config.js?