Angular CLI新手求助：如何正确导入自定义JavaScript文件

嘿，我来帮你梳理下这个问题——你的当前实现确实有几个小问题，导致没法正确导入和使用自定义JS文件，我一步步给你讲清楚怎么改：

原实现的核心问题 #

你的代码里有三个关键问题：

1. utils.js没有导出内容：你定义的text和util都是全局变量，在ES模块系统里，外部无法直接访问这些未导出的变量
2. 类型定义文件写法错误：utils.d.ts里的模块声明和导出逻辑不匹配，TypeScript无法正确识别模块的类型
3. 模块路径未配置：Angular CLI默认不会把src/utils识别为名为utils的模块，直接用import * as util from 'utils'会找不到文件

正确实现步骤 #

1. 修改utils.js，添加导出逻辑 #

把你的JS文件改成可导出的模块，这样外部才能导入使用：

// src/utils.js
var text = "TEST";
var util = {
  sayHello: function(name) {
    console.log( "Hello, " + name );
  }
};

// 导出需要被外部访问的变量和方法
module.exports = { util, text };

2. 修正utils.d.ts的类型声明 #

正确的类型定义应该把模块内容包裹在declare module块中，并且给出明确的类型（尽量避免用any）：

// src/utils.d.ts
declare module 'utils' {
  export const text: string;
  export const util: {
    sayHello: (name: string) => void;
  };
}

3. 配置模块路径（或使用相对路径） #

有两种方式让TypeScript找到你的模块：

方式一：配置tsconfig.json的路径别名

在tsconfig.json的compilerOptions里添加paths配置，把utils指向你的文件路径：

{
  "compilerOptions": {
    // 保留原有的其他配置...
    "paths": {
      "utils": ["src/utils"]
    }
  }
}

方式二：直接使用相对路径导入（更适合新手）

如果不想修改配置，在main.ts里用相对路径导入即可：

import * as utils from './utils';

4. 在main.ts中正确调用 #

现在你就可以正常导入并使用了：

// src/main.ts
// ... 其他原有代码
import * as utils from 'utils'; // 或者用相对路径'./utils'

console.log('TEXT: ', utils.text); // 输出：TEXT: TEST
utils.util.sayHello("Bob"); // 控制台输出：Hello, Bob

额外提示 #

如果你的JS文件逻辑比较简单，也可以直接在angular.json的scripts数组中引入它（这样会变成全局变量），但这种方式不推荐在Angular项目中使用，因为不符合模块化的开发规范。

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