ngx-translate 无法加载某些惰性模块

Question

我有一个 Angular 应用程序，它使用 ngx-translate 进行本地化。唯一的非默认设置是我使用自定义加载，它从服务获取字符串。所以在我的

app.module.ts

中我有以下内容...

 TranslateModule.forRoot({     
    loader: { provide: TranslateLoader, useFactory: () => new CustomNgxLoader() },      
    useDefaultLang: false
}),

自定义加载器实际上只是一个字典，即

export class CustomNgxLoader implements TranslateLoader {    
  private static dictionaries: { [key: string]: any; } = {};
  
  public setTranslations(locale: string, translations: any = {}): void {
      
    CustomNgxLoader.dictionaries[locale] = translations;
  }
 
  public getTranslation(locale: string): Observable<any> {
    const dictionary = CustomNgxLoader.dictionaries[locale] || {};
    return of(dictionary);
  }
}

我拨打电话，获取资源，然后通过设置

  this.ngxLoader.setTranslations(currentLocale, i18nLookup);
  this.translate.use(currentLocale);

我还有许多延迟加载的模块，每个模块在模块导入中都只有以下内容...

 TranslateModule.forChild(),

我从 Angular v7 开始就采用了这种设置，从来没有遇到过问题。然而，在我上次升级到 Angular

^16.1.3

和

"@ngx-translate/core": "^15.0.0"

后，我现在大部分（其中一个由于某种原因有效）没有翻译。我在非惰性模块中进行了翻译，并且（奇怪的是）在惰性加载模块之一中进行了翻译。

我已经使用相同的设置（使用虚拟服务调用）完成了一个简单的新测试应用程序，并且没有遇到任何问题。所以我不知道为什么我的生产应用程序失败了。

我尝试过诸如这篇文章中的想法，并将隔离等值传递给fhte

forChild

调用，正如我在github页面上的其他问题（类似但更复杂）中看到的那样。

由于我无法在示例应用程序中重现，因此我一直在尝试调试它以找到可能出错的地方。

到目前为止，我唯一的线索是在

TranslateService

构造函数中放置断点，该构造函数似乎在我们进入每个惰性模块时被调用。

差异似乎在于作为

store

参数传入的内容。

当我启动应用程序并加载非延迟页面时，第一次调用构造函数时，

store

属性吃空了......

这并不奇怪，因为我还没有打电话给

translator.use()

，而且我最初的非惰性模块都翻译得很好。现在我加载第一个惰性模块，调用

forChild1()

，在

TranslateService

构造函数中，我看到以下存储参数...

所有翻译都有效。

现在我加载下一个惰性模块，但不在构造函数中，存储参数现在为空

不，我没有该组件的翻译，我只看到按键。

另外，如果我在组件构造函数中查看

translateService.currentLang

，它是未定义的（而在翻译工作的组件中，它是设置的。根据我还添加的其他一些建议

 const currentLang = translateService.currentLang;
 translateService.currentLang = '';
 translateService.use(currentLang);

在组件构造函数中，但这没有帮助（我假设商店集合中没有任何内容要加载）。

我尝试查看这个“存储”的实例化位置，查看调用堆栈中的每个点，

我只是看不到构造函数参数来自哪里。

由于我在简单的示例应用程序中没有遇到问题，因此我不得不在更大的应用程序中尝试解决这个问题。除了自定义加载程序之外，该设置几乎是库存的，在最新更新之前我从未遇到过此问题。

我如何进一步调试这个？可能是什么原因造成的？我不知道还能尝试什么。

更新1

我在翻译存储属性初始化中放置了一个断点，当我进入被破坏的惰性组件时，我看到一个新的

TranslateStore

正在被实例化..

在我有效的示例应用程序中，我没有看到它被第二次调用。因此，由于某种原因，正在创建一个新的

TranslateStore

实例。

放入较早的断点，对于第二个实例，我们进入此处...

def=空

这里是创建新 TranslateStore 的地方......

又看源码

translate.store.ts

，

TranslateStore

没有@injectable()

所以，现在需要知道为什么会发生这种情况（在这里而不是在我的示例应用程序中）

Answer 1

我的项目也有类似的问题。同一模块中的某些页面我可以加载翻译，但在其他页面中未加载翻译。

你解决了吗？

我不知道如何解决。我什至不知道如何搜索它，因为我没有错误。