在Angular项目中调用JS函数遇报错，寻求解决方案

问题根源分析 #

你遇到的函数未定义、文件访问被禁止和MIME类型检查错误，主要来自两个核心问题：

1. app.component.html中手动添加的<script>标签路径错误，且Angular已通过angular.json配置自动引入JS文件，手动添加属于重复操作，同时编译后项目根目录不存在src文件夹，直接访问/src/会触发权限和MIME类型错误；
2. 修改angular.json后未重启开发服务器，导致配置变更未生效。

分步解决方案 #

1. 移除模板中的手动Script标签

打开app.component.html，删除以下无效代码：

<script src = "/src/assets/action.js"></script>

Angular会通过angular.json的scripts数组自动将指定JS文件打包注入项目，无需手动在模板中引入。

2. 对齐文件路径与配置

检查action.js的实际存放位置，确保angular.json中的路径完全匹配：

• 若文件放在src/assets/目录下，配置应为：

  "styles": [
    "src/styles.scss"
  ],
  "scripts": ["src/assets/action.js"]
  

• 若文件放在src/assets/js/子目录下，配置应为：

  "styles": [
    "src/styles.scss"
  ],
  "scripts": ["src/assets/js/action.js"]
  

3. 重启Angular开发服务器

修改angular.json后必须重启服务才能让配置生效，停止当前运行的ng serve，重新执行：

ng serve

4. 验证函数调用

你的app.component.ts代码无需修改，重启服务后打开浏览器控制台，应该能看到输出ffffffffffffff。

可选优化方案（类型安全） #

如果希望获得更好的类型支持，可将JS文件转为ES模块：

1. 修改action.js内容：

export function Di(){
    console.log('ffffffffffffff');
}

2. 在app.component.ts中直接导入调用：

import { Component, OnInit } from '@angular/core';
import { Di } from '../assets/action.js'; // 根据实际路径调整

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit{
  title = 'Calculator';

  ngOnInit() { 
    Di();
  }
}

这种方式无需配置angular.json的scripts数组，更符合现代前端模块规范。

内容的提问来源于stack exchange，提问作者Mostafa M. Galal