import * as not working

[indraraj26]

🐞 bug report

Affected Package

The issue is caused by package @angular/.... ### Is this a regression? Yes, the previous version in which this bug was not present was: no idea ### Description I am using this utils to show configuration and run local test, It is working fine as a standalone (without angular). URL : https://github.com/indraraj26/automate-ng-build-process ``` import * as chalk from 'chalk'; import * as env from './src/environments/environment'; import * as envStaging from './src/environments/environment.staging'; import * as envProduction from './src/environments/environment.prod'; import * as envDev from './src/environments/environment.dev'; ``` ## 🔬 Minimal Reproduction https://stackblitz.com/...

🔥 Exception or Error

D:\test\latest\ng-test>npm run ts-node automate

> test-@0.1.0 ts-node D:\test\latest\ng-test
> ts-node "automate"

D:\test\latest\ng-test\automate.ts:12
import * as chalk from 'chalk';
       ^

SyntaxError: Unexpected token *
    at Module._compile (internal/modules/cjs/loader.js:721:23)

🌍 Your Environment

Angular Version:

>ng --version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/

Angular CLI: 9.0.3
Node: 10.16.0
OS: win32 x64

Angular: 9.0.2
... animations, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.3
@angular-devkit/build-angular     0.900.3
@angular-devkit/build-optimizer   0.900.3
@angular-devkit/build-webpack     0.900.3
@angular-devkit/core              9.0.3
@angular-devkit/schematics        9.0.3
@angular/cdk                      8.2.3
@angular/cli                      9.0.3
@angular/material                 8.2.3
@ngtools/webpack                  9.0.3
@schematics/angular               9.0.3
@schematics/update                0.900.3
rxjs                              6.5.4
typescript                        3.7.5
webpack                           4.41.2

Anything else relevant?

[JoostK]

I'm sorry but there's not enough information available for us to understand the issue. The repro you link to does not contain any Angular code, and you're saying it works if I understand correctly. I don't see any other repro that indicates there's framework issue.

[indraraj26]

Repo: https://github.com/indraraj26/ng-test-import-as Run in terminal: npm run env-config

error you will get

D:\ng-test>npm run env-config

> ng-test@0.0.0 env-config D:\ng-test
> ts-node automate Development

D:\ng-test\automate.ts:1
import * as chalk from 'chalk';
       ^

SyntaxError: Unexpected token *
    at Module._compile (internal/modules/cjs/loader.js:721:23)
    at Module.m._compile (D:\ng-test\node_modules\ts-node\src\index.ts:473:23)

[petebacondarwin]

@indraraj26 - your problem does not appear to be related to the Angular project. You are not actually invoking the Angular framework (or even the Angular tools) in your reproduction. I suspect it is related to the output of the ts-node TypeScript compilation and your version of node, on which you are trying to run the code.

Closing as this is not an issue in Angular.

[petebacondarwin]

Note that ts-node will attempt to compile and run the source code using this https://github.com/indraraj26/ng-test-import-as/blob/master/tsconfig.json configuration. And in particular it is set to "module": "esnext" (https://github.com/indraraj26/ng-test-import-as/blob/master/tsconfig.json#L10). So therefore the imports are not being downleveled to CommonJS require calls and I suspect that your version of node.js cannot handle native ESM imports.

[indraraj26]

Hi @petebacondarwin ,

if you clone this https://github.com/indraraj26/automate-ng-build-process it will work without any issue. I copied devDependencies version of ts-node etc from angular package.json it is working fine.

    "devDependencies": {
        "@types/node": "^12.12.38",
        "chalk": "^4.0.0",
        "ora": "^4.0.4",
        "prompt-confirm": "^2.0.4",
        "ts-node": "^8.3.0",
        "typescript": "^3.8.3"
    }

TOO Fast I think it is totally related to ts-config configuration node version

node -v
v10.16.0

[petebacondarwin]

https://nodejs.org/docs/latest-v10.x/api/esm.html

[indraraj26]

I will update my node version but how above util is working when i am not using inside angular project?

Thank you for your reply.

[destus90]

@indraraj26 https://github.com/webpack/webpack/issues/10460#issuecomment-599423728 Seems to me that the problem is related to ts-loader, as per the linked issue above. It is supposed to be fixed in the next major version of webpack https://github.com/webpack/webpack/projects/5#card-34930305

[indraraj26]

Just to update...

I just updated node to 12 version now i am getting this

D:\ng-test>npm run env-config

> ng-test@0.0.0 env-config D:\ng-test
> ts-node automate Development

D:\ng-test\automate.ts:1
import * as chalk from 'chalk';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:1047:16)
    at Module._compile (internal/modules/cjs/loader.js:1097:27)

D:\ng-test>node -v
v12.16.3

[indraraj26]

Hi @petebacondarwin , any suggestions? i have just written above TS to enhanced build show some configuration api url that are in environment.ts and run dist on local to test.

[petebacondarwin]

@indraraj26 - this is because ts-node reads the tsconfig.json file by default and in that file you will find "module": "esnext".

So when ts-node compiles the TS file the output JS, which node is trying to run, will include the import statement. The two solutions are:

1) Run node with ES modules support turned on. (See https://blog.logrocket.com/es-modules-in-node-js-12-from-experimental-to-release/) 2) Create a separate tsconfig.json and pass this to ts-node via the -p flag.

[indraraj26]

Thank you @petebacondarwin . it is resolved with second option now my util will be helpful for me/others in future.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}