Chrome控制台JIT/AOT编译Angular编译JavaScript代码后出现错误(编译成功)

Question

我知道有些人会认为我的问题是重复的，但我已经搜索并尝试了其他Stack Overflow帖子中给出的所有解决方案。而且我也没有发现类似的问题，在Angular编译后出现错误。

Uncaught SyntaxError:不能在模块外使用import语句

在控制台中单击错误脚本后，它会导致

import {Observable} from 'rxjs';

我尝试过但不适合我的事情:

1. 我已经在package.json中添加了"type":"module"

2. index.html中没有添加type="module"的脚本标签

3. 有很多地方，我已经使用import {this} from "that";，但只显示一个错误在rxjs部分以上。

4. 尝试在tsconfig文件中添加"compilerOptions": { "module": "CommonJS" }，并将type设置为module。

5. 另外，我正在使用Node.js版本16 LTS。

6. 尝试在tsconfig文件中更新"target": "esnext", "module": "commonjs"模块。

7. 当我试图使用require时出现错误。

依赖版本

我使用的是Angular 8.2node . js v16.14.2

tsconfig.js
compileOnSave:false,
compilerOptions"{
sourceMap:true
declaration:false
downleveliteration:true
experimentalDecorators:true
module:esnext
moduleResolution:node
importHelpers:true
allowSyntheticDefaultImports:true
target"es2015
typeRoots: [node_modules/#types]
lib[es2018,dom]
angularCompilerOptions{
fullTemplateTypeCheck:true,
strictInjectionParameters:true

Answer 1

这可能是一个非启动器，但我认为我在几个月前的升级过程中遇到了这个问题，我相信我通过更新目标和库来解决这个问题，我也有我的模块固定，但不认为是这样。

"compilerOptions": {
"module": "es2020",
"target": "es2017",
"lib": ["es2020", "dom"]

Answer 2

我强烈建议你或更新你的angular(我的首选)或降级你的nodeJS…

在这个博客中，作者列出了angular和nodejs版本之间的兼容性列表。

8角。X被设计为与节点10兼容。X(或10.9。因为这些是2019年那个时候的LTS版本。也许是节点12。X仍然有更好的兼容性机会。

和Angular 8一样。不再支持X，将其与节点16一起使用。x(当前LTS)有风险。(可能是你的问题的原因)。

这个语法没有问题:

import {Observable} from 'rxjs';

这就是我认为你的问题可能是由于与nodeJs不兼容引起的原因。

Answer 3

你应该试试这个…

import Observable from 'rxjs';

和检查'rxjs'版本与nodejs版本的兼容性