Angular17+Carbon v5迁移：NotificationService引发NullInjectorError修复方案

Angular项目升级至v17、Carbon UI升级至v5后，使用NotificationService时出现以下报错，移除该服务的导入后错误消失：

NullInjectorError: NullInjectorError: No provider for ViewContainerRef!
at NullInjector.get (core.mjs:1654:27)
at R3Injector.get (core.mjs:3093:33)
at R3Injector.get (core.mjs:3093:33)
at R3Injector.get (core.mjs:3093:33)
at injectInjectorOnly (core.mjs:1100:40)
at Module.ɵɵinject (core.mjs:1106:60)
at Object.NotificationService_Factory [as factory] (carbon-components-an…fication.mjs:22:102)
at core.mjs:3219:47
at runInInjectorProfilerContext (core.mjs:866:9)
at R3Injector.hydrate (core.mjs:3218:21)
Zone - Promise.then (async)     
(anonymous) @   src_app_origination-…form_module_ts.js:1

已搜索相关内容但关于Carbon的信息较少，查阅Carbon文档也未找到有效解决方案，寻求修复方法。

• 调整NotificationService的注入范围：Carbon v5的NotificationService不再支持全局根注入，需将其添加到使用该服务的组件的providers数组中，确保服务获取到组件上下文的ViewContainerRef：

  @Component({
    selector: 'app-your-component',
    templateUrl: './your-component.component.html',
    styleUrls: ['./your-component.component.scss'],
    providers: [NotificationService]
  })
  export class YourComponent {
    constructor(private notificationService: NotificationService) {}
  }
  

• 切换为组件式通知API：Angular 17与Carbon v5更推荐使用组件而非服务来实现通知功能，可直接使用<cds-notification>组件，或通过ViewContainerRef手动创建组件实例：

  import { Component, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
  import { CdsNotification } from '@carbon/web-components-angular';
  
  @Component({
    selector: 'app-your-component',
    template: ''
  })
  export class YourComponent {
    constructor(private vcRef: ViewContainerRef, private cfr: ComponentFactoryResolver) {}
  
    showNotification() {
      const factory = this.cfr.resolveComponentFactory(CdsNotification);
      const componentRef = this.vcRef.createComponent(factory);
      componentRef.instance.title = '通知标题';
      componentRef.instance.message = '通知内容';
    }
  }
  

• 确认模块/组件导入正确性：若使用Angular 17独立组件模式，需在组件的imports数组中导入Carbon通知相关模块；若为NgModule模式，确保在对应模块的imports中引入CarbonNotificationsModule：

  // 独立组件示例
  @Component({
    selector: 'app-your-component',
    templateUrl: './your-component.component.html',
    styleUrls: ['./your-component.component.scss'],
    standalone: true,
    imports: [CarbonNotificationsModule]
  })
  

• 排查Carbon v5迁移细节：仔细核对Carbon v5的迁移指南，部分服务类可能被标记为废弃，或依赖逻辑发生变更，需确保使用的是对应版本的最新API。

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