nesdis
nesdis

Reputation: 1220

Error: The target environment doesn't support dynamic import() syntax

In my app.component.ts file I have this code:

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  imports: [RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'temp';
  constructor() {
    let mod = import('https://cdn.jsdelivr.net/npm/js-cookie@rc/dist/js.cookie.min.js');
  }
}

and the test file app.component.spec.ts goes:

import { TestBed } from '@angular/core/testing';
import { AppComponent } from './app.component';

describe('AppComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [AppComponent],
    }).compileComponents();
  });

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app).toBeTruthy();
  });
});

ng serve and ng build have no problems and the module is dynamically imported. However ng test throws the error:

external "https://cdn.jsdelivr.net/npm/js-cookie@rc/dist/js.cookie.min.js" - Error: The target environment doesn't support dynamic import() syntax so it's not possible to use external type 'module' within a script Did you mean to build a EcmaScript Module ('output.module: true')?

package.json

  "dependencies": {
    "@angular/animations": "^19.1.0",
    "@angular/common": "^19.1.0",
    "@angular/compiler": "^19.1.0",
    "@angular/core": "^19.1.0",
    "@angular/forms": "^19.1.0",
    "@angular/platform-browser": "^19.1.0",
    "@angular/platform-browser-dynamic": "^19.1.0",
    "@angular/router": "^19.1.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.15.0"
  }
  "devDependencies": {
    "@angular-devkit/build-angular": "^19.1.8",
    "@angular/cli": "^19.1.8",
    "@angular/compiler-cli": "^19.1.0",
    "@types/jasmine": "~5.1.0",
    "jasmine-core": "~5.5.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "~5.7.2"
  }

Is there a way to solve this?

Upvotes: 0

Views: 32

Answers (0)

Related Questions