Angular 15.2.4独立组件迁移无选项及测试报错求助

一、迁移模式无法选择的处理 #

Angular 15.2.4的ng g @angular/core:standalone命令默认不会触发交互式选择界面，直接通过命令行参数指定迁移模式即可：

• 全量迁移所有组件/模块：ng g @angular/core:standalone --mode=all
• 按模块逐个迁移：ng g @angular/core:standalone --mode=module
• 单个组件迁移：ng g @angular/core:standalone --mode=component

另外检查@angular/cli版本是否与core版本一致（需同为15.2.4），不一致的话执行npm install @angular/cli@15.2.4同步版本。

二、测试中ActivatedRoute注入错误的修复 #

独立组件不再依赖NgModule的全局提供者，测试时需手动提供ActivatedRoute的模拟实现：

方式1：使用Angular官方测试工具 #

Angular 14+提供了provideMockActivatedRoute工具函数，简化模拟：

import { ActivatedRoute } from '@angular/router';
import { provideMockActivatedRoute } from '@angular/router/testing';
import { YourStandaloneComponent } from './your-component.component';

describe('YourStandaloneComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [YourStandaloneComponent],
      providers: [
        provideMockActivatedRoute({
          snapshot: { paramMap: { get: (key) => key === 'id' ? 'test-123' : null } },
          params: of({ id: 'test-123' })
        })
      ]
    }).compileComponents();
  });
});

方式2：手动创建模拟对象 #

如果不想依赖测试工具包，直接自定义模拟值：

import { ActivatedRoute } from '@angular/router';
import { of } from 'rxjs';
import { YourStandaloneComponent } from './your-component.component';

describe('YourStandaloneComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [YourStandaloneComponent],
      providers: [
        {
          provide: ActivatedRoute,
          useValue: {
            snapshot: { paramMap: new Map([['id', 'test-123']]) },
            params: of({ id: 'test-123' })
          }
        }
      ]
    }).compileComponents();
  });
});

批量优化 #

可以封装一个公用测试模块，统一提供ActivatedRoute等常用服务的模拟，在所有需要的组件测试中导入，减少重复代码：

// test-mocks.module.ts
import { NgModule } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { of } from 'rxjs';

@NgModule({
  providers: [
    {
      provide: ActivatedRoute,
      useValue: {
        snapshot: { paramMap: new Map() },
        params: of({})
      }
    }
  ]
})
export class TestMocksModule {}

测试时直接导入该模块即可：

await TestBed.configureTestingModule({
  imports: [YourStandaloneComponent, TestMocksModule]
}).compileComponents();

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