Angular 13 应用程序包裹在根问题中提供的 Web 组件 DI 中

Question

我有一个空白的 angular 13 应用程序，它由使用

@angular/elements

的自定义 Web 组件包装。这也是项目的回购

在这个项目中，我有一个延迟加载的

test.module.ts

，它在其

test.service.ts

数组中声明了

providers

。

test.service.ts

也是

providedIn: 'root'

。我正在尝试将令牌注入

test.service.ts

并更改延迟加载

test.module.ts

中的令牌值。

令牌：

export const TESTERTOKEN = new InjectionToken<string>('TESTERASDASDAS');

test.module.ts

的价值变化：

{
  provide:TESTERTOKEN,
  useValue:'a234234'
}

注入

test.service.ts

：

constructor(@Optional()@Inject(TESTERTOKEN) asd:string) {
  const pop = asd;
}

问题

这里有一段视频直观地解释了这个问题： https://youtu.be/1mXAPIEc5uU

当应用程序用自定义 Web 组件包装时，

test.module.ts

的值更改失败。

当我删除自定义 Web 组件时，值更改有效

当我从

providedIn: 'root'

中删除

test.service.ts

时，值更改有效。

我想要的解决方案

我希望应用程序用 web 组件包装，服务保留

providedIn: 'root'

在延迟加载模块中进行值更改的地方

test.module.ts

.