Angular Datatables Cannot use import statement outside a module Error

Question

I am trying to add angular datatables to a new test project. I have used the following commands:

ng new test-app
cd test-app
ng add angular-datatables

I get the following output from the ng-add command:

~/projects/test-app (master) $ ng add angular-datatables
- Determining package manager...
i Using package manager: npm
- Searching for compatible package version...
√ Found compatible package version: [email protected].
- Loading package information from registry...
√ Package information loaded.
- Installing package...
√ Package successfully installed.
An unhandled exception occurred: Cannot use import statement outside a module
See "C:\Users\User\AppData\Local\Temp\ng-d8eINZ\angular-errors.log" for further details.

In the angular-errors.log file, I see the following error:

[error] C:\Users\User\projects\test-app\node_modules\angular-datatables\schematics\src\ng-add\index.js:1
import { chain } from '@angular-devkit/schematics';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:979:16)
    at Module._compile (internal/modules/cjs/loader.js:1027:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at new ExportStringRef (C:\Users\User\projects\test-app\node_modules\@angular-devkit\schematics\tools\export-ref.js:19:25)
    at SchematicEngineHost._resolveReferenceString (C:\Users\User\projects\test-app\node_modules\@angular-devkit\schematics\tools\node-module-engine-host.js:95:21)
    at SchematicEngineHost._resolveReferenceString (C:\Users\User\projects\test-app\node_modules\@angular\cli\models\schematic-engine-host.js:62:22)
    at SchematicEngineHost.createSchematicDescription (C:\Users\User\projects\test-app\node_modules\@angular-devkit\schematics\tools\file-system-engine-host-base.js:174:34)
    at SchematicEngine.createSchematic (C:\Users\User\projects\test-app\node_modules\@angular-devkit\schematics\src\engine\engine.js:215:38)
    at CollectionImpl.createSchematic (C:\Users\User\projects\test-app\node_modules\@angular-devkit\schematics\src\engine\engine.js:70:29)
    at AddCommand.getSchematic (C:\Users\User\projects\test-app\node_modules\@angular\cli\models\schematic-command.js:134:27)
    at AddCommand.runSchematic (C:\Users\User\projects\test-app\node_modules\@angular\cli\models\schematic-command.js:315:32)
    at AddCommand.executeSchematic (C:\Users\User\projects\test-app\node_modules\@angular\cli\commands\add-impl.js:212:31)

I have tried this in Angular version 11.2.14 and 12.2.9 with the same result.

Trying again in Angular 13.0.2, I get the following:

~/projects/test-app (master) $ ng add angular-datatables
- Determining package manager...
i Using package manager: npm
- Searching for compatible package version...
√ Found compatible package version: [email protected].
- Loading package information from registry...
√ Package information loaded.
No terminal detected. '--skip-confirmation' can be used to bypass installation confirmation. Ensure package name is correct prior to '--skip-confirmation' option usage.
Command aborted.

Then, adding --skip-confirmation, I get the same error as before.

How does one get past this error?

Answer 1

I'm surprised no one has reported an answer. I had this trouble too, but installing ng add @angular/material. The key is the "No terminal detected."

I was using git bash.

I switched to a Windows PowerShell and it was fine. This is odd since I've been able to use ng add in git bash in the past. Not sure what is different now.