在 Chrome 控制台中编译 JavaScript 代码的 Angular 的 JIT/AOT 编译后出错（编译成功）

Question

I know some people will think my question is repeated but I have searched and tried all the solutions given in other Stack Overflow posts. And also I have not found a similar question where the error came up after Angular compilation.

Uncaught SyntaxError: cannot use import statement outside a module

After clicking on the error script in the console it leads to

import {Observable} from 'rxjs';

Things I have tried but not worked for me:

1. I have already added "type":"module" in the package.json

2. There are no script tags in index.html to add type="module"

3. There are a lot of places where I have used import {this} from "that"; but only showing an error in rxjs part above.

4. Tried adding "compilerOptions": { "module": "CommonJS" } , in the tsconfig file, along with setting type to module in package.json and without it, as well.

5. Also, I am using Node.js version 16 LTS.

6. Tried updating module "target": "esnext", "module": "commonjs" , in the tsconfig file.

7. Getting error when I am trying to use require .

dependencies version

I am using Angular 8.2 node.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

This might be a non-starter but I think I ran into this a couple months ago during an upgrade and I believe I resolved it by updating the target and the lib I also have my module pinned but don't think that is it.

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

Answer 2

You should try this...

import Observable from 'rxjs';

and check your version of 'rxjs' with check compatibility of nodejs version

Answer 3

I would strongly advise you to or update your angular (my preference) or downgrade your nodeJS...

In this blog the author compiled a list of compatibility between angular and nodejs versions.

Angular 8.x is designed to be compatible with node 10.x (or 10.9.x as per blog) because those were the LTS versions at that moment in the year 2019. Maybe node 12.x would still have a better chance of compatibility.

As Angular 8.x is no longer supported, using it with node 16.x (the current LTS) is risky. (might be the cause of your issue).

There is nothing wrong with this syntax:

import {Observable} from 'rxjs';

that's the reason for my belief that your issue can be caused by incompatibility with nodeJs.