Angular开发服务器无法找到外部JS文件，但生产构建正常

问题本质 #

生产构建时Angular会自动把public目录下的资源复制到dist目录，所以nginx部署后能正常访问；但ng serve基于Vite开发服务器，其模块解析逻辑默认不会直接映射根路径下的非标准资源路径，导致出现[vite]解析/js/external.js失败的500错误。

解决方案 #

1. 修正模块导入路径（最简方案） #

如果是在index.html中用ES模块方式导入外部JS，明确指向public目录的完整路径：

<!-- 修改前 -->
<script type="module">
  import { myFunc } from '/js/external.js';
  myFunc();
</script>

<!-- 修改后 -->
<script type="module">
  import { myFunc } from '/public/js/external.js';
  myFunc();
</script>

如果想保持/js/的简洁路径，可在项目根目录创建vite.config.ts配置别名：

import { defineConfig } from 'vite';
import angular from '@angular-devkit/build-angular/src/vite/index.js';

export default defineConfig({
  plugins: [angular()],
  resolve: {
    alias: {
      '/js/': '/public/js/'
    }
  }
});

2. 迁移到Angular推荐的资源目录 #

将外部资源移到src/assets（Angular官方指定的静态资源存放位置），修改引用路径即可：

• 移动文件：public/js/external.js → src/assets/js/external.js
• 更新index.html：

<script type="module">
  import { myFunc } from '/assets/js/external.js';
  myFunc();
</script>
<link rel="stylesheet" href="/assets/css/external.css">

这种方式无需额外配置，开发和生产环境都能自动适配路径。

3. 确认angular.json的资源配置 #

如果坚持使用根目录下的public，确保angular.json中build和serve的assets字段包含该目录：

{
  "projects": {
    "angular": {
      "architect": {
        "build": {
          "options": {
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "public" // 确保此行存在
            ]
          }
        },
        "serve": {
          "options": {
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "public" // 开发环境同步配置
            ]
          }
        }
      }
    }
  }
}

配置后重启ng serve即可生效。

GOVUK Frontend集成建议 #

后续集成GOVUK框架时，推荐通过npm安装而非手动复制静态资源，这样能避免路径问题：

1. 安装依赖：npm install govuk-frontend
2. 在angular.json中配置全局资源：

{
  "styles": [
    "node_modules/govuk-frontend/dist/govuk/all.css",
    "src/styles.css"
  ],
  "scripts": [
    "node_modules/govuk-frontend/dist/govuk/all.js"
  ]
}

这种方式在开发和生产环境下都能稳定工作，无需手动维护资源路径。

内容的提问来源于stack exchange，提问作者Marcus