Angular中JS文件导入报错：无法在模块外使用import语句

1. 修正import语法错误 #

你的main.js中import语句缺少from关键字，正确写法：

import { myclass } from './myclass.js';

2. 解决模块识别问题 #

场景一：在Angular项目中规范使用 #

Angular基于TypeScript和模块化构建，推荐按以下方式调整：

• 将myclass.js重命名为myclass.ts，符合Angular的TS开发规范：

export class myclass{
    showMessage(){
        alert("This is a message");
    }
}

• 在Angular的组件/服务文件中导入该类（而非单独的main.js），比如在app.component.ts中：

import { myclass } from './myclass';

// 在组件类中使用
export class AppComponent {
  testMessage() {
    const c = new myclass();
    c.showMessage();
  }
}

• Angular会通过构建工具自动处理模块依赖，无需手动在HTML中标记脚本类型。

场景二：直接在浏览器中运行脚本（非Angular构建流程） #

如果是直接在静态HTML中引入脚本，需要给script标签添加type="module"属性，告诉浏览器这是ES模块：

<script type="module" src="main.js"></script>

3. 补充变量声明 #

你的testMessage函数中变量c未声明，需添加let或const避免全局变量污染：

function testMessage(){
    const c = new myclass();
    c.showMessage();
}

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