Angular development server cannot find the external JavaScript file, but works fine with a...

I'm trying to build a "hello world" application with some "external" assets. When I run npm run build and serve the content via nginx, everything works fine. But if I do ng serve it fails to find the JavaScript file.

• 
  Angular CLI: 20.0.1; Node 22.15.1; npm 10.9.2
  
  
• 
  Create new project named angular via ng new angular --routing which created a public directory for assets.
  
  
• 
  I added the following content to public/js/external.js:
  
  export const externalConst = "angular";
  export function showAlert() {
  alert("This is an external JavaScript file.");
  }
• 
  And I created public/assets/css/external.css as a zero-length file.
  
  
• 
  Finally, modifying the supplied index.html to include both files looks like this:
  
  <!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="utf-8" />
  <title>Angular</title>
  <base href="/" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="icon" type="image/x-icon" href="favicon.ico" />
  <link rel="stylesheet" href="assets/css/external.css" />
  </head>
  <body>
  <app-root></app-root>
  <script type="module" src="js/external.js"></script>
  <script type="module">
  import { showAlert } from "/js/external.js";
  showAlert();
  </script>
  </body>
  </html>
• 
  Run npm run build, and see that dist/angular/browser contains both files under /assets and /js and that the index.html file has retained the references. Serve the content under dist/angular/browser via nginx, and index.html immediately presents an alert of "This is an external Javascript file." as expected, and Developer Tools shows me that both JS and CSS files were loading correctly with no errors. Great!
  
  
• 
  Run ng serve and point the browser at port 4200 and things are not so good. In the console window, I get:
  
  [vite] Internal server error: Failed to resolve import "/js/external.js" from "/index.html?html-proxy&index=0.js". Does the file exist?
  Plugin: vite:import-analysis
  File: /index.html?html-proxy&index=0.js:2:34
  1 |
  2 | import { showAlert } from "/js/external.js";
  | ^
  3 | showAlert();
  4 |
  at TransformPluginContext._formatLog (file:///home/marcus/angular/node_modules/vite/dist/node/chunks/dep-DBxKXgDP.js:42499:41)
  at TransformPluginContext.error (file:///home/marcus/angular/node_modules/vite/dist/node/chunks/dep-DBxKXgDP.js:42496:16)
  at normalizeUrl (file:///home/marcus/angular/node_modules/vite/dist/node/chunks/dep-DBxKXgDP.js:40475:23)
  [...]

And in the browser there's a giant popup with similar text, and via Developer Tools I can see that index.html?html-proxy&index=0.js returned a 500 error.

So presumably I'm not adding these files in quite the right way. I've seen some examples where entries have been added in the scripts and styles blocks in angular.json but I don't fully understand the implications of that - it seems like that's making it "internal" rather than external and that the files get "packed" that way.

What I'm actually trying to do is create a basic app that imports the GOVUK Frontend Framework using the instructions here but this hasn't worked either (JavaScript doesn't load and "nunjucks" doesn't appear to work) that I've tried to create the smallest reproducible test-case with external files and I immediately hit this problem.

Continue reading...