Getting 404 for all imports #651

abhinavek · 2024-09-23T14:01:07Z

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

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

The text was updated successfully, but these errors were encountered:

abhinavek · 2024-09-23T14:18:23Z

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 · 2024-09-24T04:30:54Z

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 · 2024-09-24T20:08:40Z

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 · 2024-09-24T20:42:35Z

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 · 2024-09-25T05:07:21Z

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

manfredsteyer · 2024-09-30T21:56:16Z

Perhaps canvas is an optional dep of konva that is not installed. As @JuNe98 said, you can try to put them into the skip list.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Getting 404 for all imports #651

Getting 404 for all imports #651

abhinavek commented Sep 23, 2024

abhinavek commented Sep 23, 2024

JuNe98 commented Sep 24, 2024

abhinavek commented Sep 24, 2024

abhinavek commented Sep 24, 2024 •

edited

Loading

JuNe98 commented Sep 25, 2024

manfredsteyer commented Sep 30, 2024

Getting 404 for all imports #651

Getting 404 for all imports #651

Comments

abhinavek commented Sep 23, 2024

abhinavek commented Sep 23, 2024

JuNe98 commented Sep 24, 2024

abhinavek commented Sep 24, 2024

abhinavek commented Sep 24, 2024 • edited Loading

JuNe98 commented Sep 25, 2024

manfredsteyer commented Sep 30, 2024

abhinavek commented Sep 24, 2024 •

edited

Loading