Angular 12组件中导入JavaScript文件失败的原因及解决方法

这是Angular项目里很常见的配置类问题，我来帮你梳理背后的原因和可行的解决方法：

问题根源 #

Angular基于TypeScript构建，TS编译器（tsc）对模块导入有默认的严格规则，导致你直接用import * as script from 'src/assets/js/home/home.js';失败，主要有这几点：

1. TS默认不识别JS文件作为模块：默认tsconfig.json里的allowJs是false，TS编译器不会处理JS文件的导入请求，自然找不到对应的模块。
2. assets目录的定位逻辑：assets目录在Angular里是作为静态资源目录管理的，默认不会被TS编译器当作模块解析路径的一部分，除非你手动配置让TS识别它。
3. 绝对路径解析问题：直接用src/开头的绝对路径，TS可能无法正确映射到项目根目录，需要通过paths配置来统一路径别名。

正确的导入方法 #

根据你的JS文件类型（ES模块/全局脚本），有两种不同的处理方式：

情况1：你的JS文件是ES模块（包含export语句） #

这种情况下可以通过配置TS来实现模块导入：

1. 修改tsconfig.json配置：
   打开项目根目录的tsconfig.json，确保以下配置正确：

   {
     "compilerOptions": {
       "allowJs": true, // 允许TS处理JS文件
       "paths": {
         "@assets/*": ["src/assets/*"] // 配置路径别名，方便导入
       }
     },
     "include": [
       "src/**/*.ts",
       "src/assets/js/**/*.js" // 让TS编译器包含这些JS文件
     ]
   }
   

2. 使用别名或相对路径导入：
   • 用别名导入（推荐）：

     import * as script from '@assets/js/home/home.js';
     

   • 或者用相对路径（根据组件所在位置调整）：

     // 假设组件在src/app/home组件下，相对路径是../../assets/js/home/home.js
     import * as script from '../../assets/js/home/home.js';
     

情况2：你的JS文件是全局脚本（无export，仅执行全局代码） #

如果JS文件只是定义了全局变量或执行初始化逻辑，不需要用import，而是通过Angular的脚本配置加载：

1. 修改angular.json配置：
   找到architect -> build -> options -> scripts数组，添加你的JS文件路径：

   {
     "projects": {
       "your-project-name": {
         "architect": {
           "build": {
             "options": {
               "scripts": [
                 "src/assets/js/home/home.js"
               ]
             }
           }
         }
       }
     }
   }
   

2. 在组件中声明全局变量：
   如果需要在组件中使用脚本里的全局变量，需要先在组件顶部声明这个变量：

   declare const yourGlobalVariable: any; // 替换成你的全局变量名
   
   @Component({...})
   export class YourComponent {
     ngOnInit() {
       console.log(yourGlobalVariable); // 现在可以正常使用了
     }
   }
   

额外注意事项 #

• 修改配置后，记得重启Angular开发服务器（ng serve），让配置生效。
• 如果你的JS文件依赖其他全局库，也要确保这些库已经被正确加载（同样添加到scripts数组里）。

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