External JS file in Angular 18

Question

When using a Leaflet plugin in Angular 18, everything works fine during development (serve time). However, after building the project, the JS file doesn't load, causing an error.

For example, with Leaflet.EasyButton this error happened:

C.easyButton is not a function

I tried adding the JS file to angular.json, including it in allowedCommonJsDependencies, and disabling optimization, but none of these solutions worked.

import JS file:

import 'public/js/easy-button.js';

It seems the JS file is not loaded in the correct order in the built files.

you say "I tried adding the JS file to angular.json, including it in allowedCommonJsDependencies". NOT, it's in architect-->build-->options-->scripts or import * as Easy from 'public/js/easy-button.js'; — Eliseo
– Eliseo, Commented Dec 5 at 7:14

Brian White · Accepted Answer · 2025-12-05 01:03:28Z

0

I had this, too. In fact, I first found this page trying to find a solution for an h.easyButton is not a function error. What worked for me in the end was just calling it via window.L.easyButton instead of L.easyButton.

Gemini explained is thus:

Your Module code sets window.L = L.
The plugin loads, sees window.L, and attaches .easyButton to it.
Crucially: Because your local L (aka h) is a frozen Namespace Object, it does not receive that new property. It remains a pure view of the leaflet exports.
So, window.L.easyButton exists. L.easyButton (or h.easyButton) does not.

This is a specific behavior of ESBuild (the new Angular build system) combined with ES Modules.

answered Dec 5 at 1:03

Brian White

8,8642 gold badges50 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

External JS file in Angular 18

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related