Angular 升级 - 错误：必须从injectInjectorOnly 的注入上下文调用inject()

Question

我有一个有角度的项目，结构如下：

\n

站点1

\n

\n
• 模块1
\n
• 模块2
\n
• SharedModule <- 不在库中，只是一个模块
\n

\n

站点2

\n

\n
• 模块3
\n
• 模块4
\n
• SharedModule <- 直接调用Main中的模块
\n

\n

我知道这并不理想，但事实就是如此。

\n

除了应用程序的名称之外，这些package.json文件完全相同。

\n

该项目是在 Angular 8 上启动的，并且一直升级得很好，但是从 11 到 12 我遇到了问题：

\n

Site1 构建良好并且运行良好。Site2 构建良好，但运行时立即出错

\n

\n

错误：必须从注入上下文\natjectInjectorOnly（核心：4745）\nat模块调用inject（）。\xc9\xb5\xc9\xb5inject（核心：4755）\natObject.RouterModule_Factory [作为工厂]（路由器：5999） )\nat R3Injector. Hydro (core.js:11438)\nat R3Injector.get (core.js:11257)\nat core.js:11295\nat Set.forEach ()\nat R3Injector._resolveInjectorDefTypes (core.js:11295 )\nat 新 NgModuleRef$1 (core.js:25325)\nat NgModuleFactory$1.create (core.js:25379)

\n

\n

由于 Site1 工作正常，我认为它一定是调用 SharedModule 的原因？

\n

我尝试添加"preserveSymlinks": true,到projects.$name.architect.build.options，但这不起作用。我没有使用npm link，因为另一个模块不是库（我知道它应该这样设置，但事实并非如此）。

\n

我花了至少 2 天的时间试图让它发挥作用（显然检查了诸如this和this之类的帖子，但那里的答案似乎不起作用。

\n

有谁知道如何解决这个问题，或者至少如何调试它？

\n

Answer 1

为了搜索者的利益，在没有得到回复之后，我向 Angular 自己询问了这个问题。

以下是提供的答案。

您有两个相互导入的不同工作区树。这必然会受到重复的 @angular/core 版本的影响，这会混淆运行时，导致您看到相当模糊的运行时错误。您可以使用路径映射来解决此问题，如库指南中所述（这也适用于没有库的情况）。不知道为什么它在早期版本中有效，它总是容易出现此类问题。

和

原因是两个独立的工作区都有自己的 @angular/core 包，并且最终都在捆绑的应用程序中。Angular 运行时将其状态保存在该模块私有的顶级模块变量中，但是如果该模块出现两次（来自 @angular/core 的两个实例），您会遇到状态仅在一个实例中正确初始化的情况，不是另一个。在这种情况下，注入上下文仅在“主要”运行时可用，但从“辅助”库部分捆绑的应用程序部分将取决于“辅助”运行时状态。

所以基本上，结构很糟糕。它首先应该作为一个适当的图书馆项目来完成。

我已经在这里演示了应该如何完成它。

Answer 2

我知道这是一个相对较老的问题，但昨天我遇到了类似的问题，并且我的工作区已经正确配置为答案中发布的示例，最重要的是，需要大量谷歌搜索才能找到另一个解决方案，所以我认为最好在更可见的地方分享它。

我的问题是，如果我从本地库注入一个没有其他依赖项的服务，它工作正常，但如果我注入一个必须将其他依赖项注入自身的服务，我会在问题中显示相同的错误。原因完全相同（角度的两个不同实例），但为我解决的是这个

https://github.com/angular/angular/issues/25813#issuecomment-584866010

对于我来说，"@angular/*": [ "./node_modules/@angular/*" ]（路径中的一个点，而不是两个点）是我所需要的，除了我自己的库的其他映射之外。这只适用于使用 TypeScript 路径映射而不是链接到库时，如此处所述。另外，我将其放在 tsconfig.json 中，而不是 tsconfig.app.json 中。要么有效。

所以我的主 Angular 应用程序中 tsconfig.json 文件的路径部分是：

{   ...,   "compilerOptions": {
    ...,
    "paths": {
      "@angular/*": ["./node_modules/@angular/*"],
      "mylib/*": ["../../location/of/my/lib/src/*"]
    }   },   ... }

我添加"@angular/*": [ "./node_modules/@angular/*" ]到我的 tsconfig.json 并且它起作用了。

尽管 github 问题已关闭，并表示 Ivy 的发布已解决该问题，但我在使用 ivy 时遇到了 Angular 12 的问题