在本地构建（ng serve）中托管非JS静态文件的方法

数据老陈

2026-5-25

整合非NPM外部项目到Angular 5的资源管理方案

我最近在开发一个Angular 5项目，需要把几个非NPM外部项目的示例/演示模块合并到当前应用中。这些演示包含.png、.wav这类静态媒体文件，我特意整理了一套目录结构来规整这些资源，分享给大家参考：

src/
├── assets/
│   ├── ext_app/
│   │   ├── media/          # 专门存放.png、.wav等静态媒体文件
│   │   ├── appfactory/     # 外部项目的工厂类相关文件
│   │   ├── 零散的外部项目JS文件  # 存放未归类的外部项目JS文件
│   │   └── ...             # 其他外部项目的杂项文件

后续配置的几个关键点

模板中引用资源：在Angular组件模板里引用这些资源时，直接使用相对路径即可，比如要显示media目录下的图片：
```
<img src="assets/ext_app/media/demo.png" alt="演示图片">
```
确保构建时资源被打包：记得在angular.json（Angular 5对应的配置文件是.angular-cli.json）的assets数组中配置ext_app目录，避免构建后这些资源丢失：
```
"assets": [
  "src/favicon.ico",
  "src/assets",
  {
    "glob": "**/*",
    "input": "./src/assets/ext_app",
    "output": "./assets/ext_app/"
  }
]
```
外部JS文件的处理：如果外部JS暴露了全局变量或方法，不要直接在index.html中硬编码引用，可以在组件里用declare声明全局变量，比如：
```
declare const externalAppInit: () => void;
```
这样就能在组件中安全调用外部JS的方法了。