Dynamic imports not supported and application fails to load component

[CarlosTorrecillas]

Which @angular/* package(s) are the source of the bug?

Don't known / other

Is this a regression?

No

Description

Since I have updated to Angular 17 and to the "application" build mode I am not able to use dynamic imports which I am seeing is not supported on ESBuild. If I then move to standard imports I am getting failures when I run the application because I get errors from the the libraries I am importing due to "window is not defined". Essentially I would like to know if there is any kind of workaround for this so that I only load that library - leaflet - when I am running on the browser

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

ERROR ReferenceError: window is not defined
    at eval (c:/git/website/node_modules/leaflet/dist/leaflet-src.js:230:19)
    at eval (c:/git/website/node_modules/leaflet/dist/leaflet-src.js:7:66)
    at node_modules/leaflet/dist/leaflet-src.js (c:/git/website/node_modules/leaflet/dist/leaflet-src.js:10:1)
    at __require2 (C:/git/website/.angular/vite-root/website/chunk-OGTRFHQR.mjs:48:50)
    at eval (c:/git/website/src/app/osm-map/osm-map-wrapper/osm-map-wrapper.component.ts:3:20)
    at async instantiateModule (file:///C:/git/website/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:50861:9)

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 17.1.1
Node: 18.13.0
Package Manager: npm 8.19.3
OS: win32 x64

Angular: 17.1.1
... animations, cli, common, compiler, compiler-cli, core
... elements, forms, language-service, platform-browser
... platform-browser-dynamic, platform-server, router, ssr

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1701.1
@angular-devkit/build-angular   17.1.1
@angular-devkit/core            17.1.1
@angular-devkit/schematics      17.1.1
@schematics/angular             17.1.1
rxjs                            7.8.1
typescript                      5.3.3
zone.js                         0.14.3

Anything else?

No response

[alan-agius4]

@CarlosTorrecillas, there are 3 main options to handle this case.

• Use it as a global script by using the scripts option.
• Import the library in the afterNextRender and afterRender life-cycle hooks, this hooks will only run in the browser. See: https://angular.io/guide/lifecycle-hooks#reading-and-writing-the-dom
• Guard the import by using isPlatformBrowser (Least preferred approach)

[CarlosTorrecillas]

Hi @alan-agius4 ,

Thanks for this. The trouble I have is that I perform the actual import of the library and ESBuild does not allow me to do a dynamic import such as require('XXXX'). If I do a standard import * as L from 'leaflet' for example I get the problem of "window not defined", and that's why I want to import the library on the afterNextRender() hook for example. Do you still think I can do it using either of the three methods you have said? Because essentially what I want to achieve is the actual "load" or import of the library at runtime.

Thanks!

[alan-agius4]

You should be able to do something the below:

async afterNextRender() {
 const lib = await import('leaflet');
}

In that case you are having problems with this syntax, please provide a minimal reproduction.

[CarlosTorrecillas]

You rock, @alan-agius4 that worked like a charm. I had then some issues with types but I sorted them out. There were actually two dynamic imports that needed change to that new way. Thanks again!

[privadojoel]

I have the same error, I am new to Angular using leaflet, could you help me with the steps to follow to solve the error.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}