使用 esnext 构建一个 js 文件如何在 angular 2 中使用它

Question

我有一个js文件，如下所示UserService.js和source.js它是使用变压器打字稿创建的，我的目标是在Angular中使用这个转换后的JS文件。

用户服务.js

import { Source } from "./source";
export class UserService {

source = new Source();

demo() {
this.source.fun();
}
}

酸.js

export class Source {
fun() {
console.log('hello world');
}
}

当我尝试在app.component.ts中使用该文件时，如下所示

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
userService=new UserService();
constructor() { }
ngOnInit(): void {
this.userService.demo();
}
}

下面是 tsconfig.json

{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"module": "esnext",
"moduleResolution": "node",
"importHelpers": true,
"target": "es2015",
"lib": [
"es2018",
"dom"
]
}

我在执行ng服务时收到以下错误

ERROR in ./dist/out-tsc/UserService.js 4:11
Module parse failed: Unexpected token (4:11)
You may need an appropriate loader to handle this file type.
| export class UserService {
|     
>     source = new Source();
|     
|     demo() {

Answer 1

以下是这里发生的事情：

1. 构建器不理解UserService.js中的语法(有问题的行标有>)。
2. 这使得编译器认为文件需要特殊处理，这就是它建议使用加载器的原因。

发生这种情况的原因如下：

1. 您正在将 JavaScript 文件 (UserService.js) 导入到 TypeScript 文件 (app.component.ts)。
2. 这个JS文件使用ES2019的语法(它有一个类字段)。
3. Angular 没有被指示编译 JS 文件 - 默认情况下它只编译 TypeScript。
4. 它尝试按原样使用该文件并失败，因为它不知道此 JS 语法。

免责声明 - 这是经验推理，我无法提供任何全面的参考。我实际上不确定为什么它不理解该语法。

溶液

我可以想到一些解决这个问题的方法。

1. 将UserService.js重命名为UserService.ts。然后，Angular 将正确转译文件。尽管如果在实际设置中Source.js也使用这种语法，那么这还不够。
2. 将"allowJs": true添加到tsconfig.json > compilerOptions。这将指示 Angular 处理 JS 文件，类似于它对待 TypeScript。这意味着编译器将转译所有 JS 文件。
3. 不要在JS文件中使用这种现代语法(当我摆脱类字段时，代码工作正常)。

注意

自从我有机会查看您的存储库以来，我注意到了一个问题。

angular.json > projects > sample-app > architect > build > options下的scripts数组通常用于外部库，这些库在全局级别定义其导出(例如 jQuery)。由于您将Source.js直接导入到UserService.js中，因此您直接将其导入到app.component.ts中，因此您不应该将这些脚本添加到此数组中 - 除了增大捆绑包的大小之外，它实际上没有任何作用。

顺便说一句，如果上述解决方案都不适合您，也可以使用此scripts数组来解决问题，但是您必须在代码中更改更多内容，这就是为什么我在这里不详细介绍。