Angular项目ng test报错不支持动态import()语法，求解决方案

app.component.ts 代码 #

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');
  }
}

app.component.spec.ts 代码 #

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 和 ng build 均无异常，模块可正常动态导入，但执行 ng test 时抛出如下错误：

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"
  }
}

以下是几种可行的解决方案：

方案1：配置Karma支持ES模块 #

1. 安装依赖：

npm install karma-esm --save-dev

2. 修改项目根目录的 karma.conf.js，添加esm到frameworks数组：

module.exports = function(config) {
  config.set({
    frameworks: ['jasmine', '@angular-devkit/build-angular', 'esm'],
    // 保留其他原有配置
  });
};

方案2：条件化执行动态导入 #

在组件中仅在浏览器环境执行CDN模块导入，跳过测试环境：

import { Component, Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
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(@Inject(PLATFORM_ID) private platformId: Object) {
    if (isPlatformBrowser(this.platformId)) {
      import('https://cdn.jsdelivr.net/npm/js-cookie@rc/dist/js.cookie.min.js');
    }
  }
}

方案3：替换为本地依赖 #

放弃CDN导入，改用npm包管理：

1. 安装本地包：

npm install js-cookie@rc

2. 修改组件代码为静态导入：

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import Cookies from 'js-cookie';

@Component({
  selector: 'app-root',
  imports: [RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'temp';
  constructor() {
    // 直接使用Cookies对象
  }
}

方案4：调整Angular测试构建配置 #

在angular.json中修改测试构建的输出模块配置：

{
  "projects": {
    "your-project-name": {
      "architect": {
        "test": {
          "options": {
            "outputModule": true,
            // 保留其他原有配置
          }
        }
      }
    }
  }
}

内容的提问来源于stack exchange，提问作者nesdis