有没有办法在 Angular6 路由期间延迟加载静态 json？

Question

我有一个 Angular6 应用程序，它被构建为更多的内部应用程序框架。 header / footer / major navigation 将被共享，但每个应用程序（功能模块）应该有相互独立的内部流程。例如，一个功能可能是购买，另一个可能是入职，另一个可能是销售仪表板。他们彼此非常不同。

我想做的是提出一种声明性的方式来为每个功能定义已知的配置。例如，次要导航（功能内的页面到页面）、顶级 header 标题和其他各种与上下文相关的数据点。我最初的想法是将它们定义为每个功能中的 JSON，这很好用，除了我现在必须导入每个功能的配置，而不管用户是否导航甚至有权访问该功能。

我已经设置了上下文服务，它正在检查 URL 导航并设置一些项目，但同样，它必须在该服务的顶部使用它导入所有可能的配置。

import { fooConfig } from '@foo\foo.config';
import { barConfig } from '@bar\bar.config';
import { bazConfig } from '@baz\baz.config';

所以问题是：有没有办法让我检查 URL 导航，并在该订阅中从正确的文件中获取配置，而无需 pre-maturely 导入它们？或者也许我可以使用模块来表达/声明那些选项？

Answer 1

在您的情况下，使用 Typescript 的 Dynamic Import Expressions 可能是一个可行的选择..

let config;
switch (val) {
  case 'foo': config = await import('@foo\foo.config'); break;
  case 'bar': config = await import('@bar\bar.config'); break;
  case 'baz': config = await import('@baz\baz.config'); break;
}

不过，据我所知，在撰写本文时，现在可以使用变量作为导入字符串（例如 await import(path)）。

Answer 2

updateConfig(feature: string) {
   import(`../configs/${feature}.config.json`).then(cfg => {
      this._currentConfig$.next(cfg);
   });
}

上面的代码片段展示了我的想法。事实证明，WebPack 无法消化您通常在导入时使用的 @ 路径，而且您也无法使用完全可变的路径。模块包的所有可能选项都必须有一些共同的路径部分。我最终将配置从 @foo\foo.config.ts 移到了 @core\configs\foo.config.json。这使得它们的模块化程度降低了，因为现在核心保留了它们的配置，但它使模块变得懒惰。

有没有办法在 Angular6 路由期间延迟加载静态 json？

Is there a way to lazily load static json during Angular6 routing?

json

lazy-loading

typescript

angular