storybook [文档]:Angular翻译 - ngx-translate集成(在工单中提供解决方案)

描述问题

我看到有关于设置React翻译的文档，但是没有关于设置Angular翻译的文档，例如使用ngx-translate。

我在this issue thread上看到了一个关于ngx-translate集成的问题。

然而，我无法使这些解决方案生效。

我用我能想到的最简单的代码重现了in this repo的问题。当然，这是一个NX仓库 - 但NX团队认为这是一个Storybook问题。

你需要在IDE上安装nx console,并需要运行storybook和my-app。libs/my-app库中只有一个故事。

我按照上面链接的问题线程中的步骤操作。这使得Storybook开始寻找翻译文件。但是它找不到资源(你会在控制台和网络选项卡中看到报告),因为它们似乎没有被包含在构建中。

我尝试将资源路径添加到Storybook配置here中。

然而，似乎没有任何效果。

我猜想这里有一个简单的解决方案，但我就是缺少关键元素 - 如何将资源添加到Storybook构建中？如果这个问题可以解决，那么剩下的ngx-translate集成看起来就可以正常工作，而且很简单。我认为如果这个最后的谜题可以解决的话，记录正确的方法是有意义的，因为ngx-translate几乎在我所工作的每个Angular应用中都被使用。

Just copying my reply to the related ticket in the NX repo, as have this working now (even though it doesn't appear to be ideal). I do think documentation around this is needed in Storybook, as I've spent nearly 2 days testing and tweaking solutions, only for the answer to be quite basic in the end.
Finally have this working, so closing the ticket. I think it would definitely be useful to have docs on ngx-translate for NX, as the issue does seem to be related to the NX architecture after all.
Ie - The fix requires a) a specific translateModule config for the app and another for a storybook that resides in a lib; b) a specific assets array for the app's assets and another for storybook's assets.
project.json assets config for the Angular app:

"assets": [
          "apps/my-app/src/favicon.ico", 
          "apps/my-app/src/assets",
          {
            "glob": "**/*",
            "input": "libs/translations-shared/src/lib/assets/il8n/",
            "output": "./assets/i18n/shared"
          }
        ],

project.json assets config for the lib's storybook and build-storybook :

"assets": [
          {
            "glob": "**/*",
            "input": "apps/my-app/src/assets/il8n/",
            "output": "./assets/standard-translations"
          },
          {
            "glob": "**/*",
            "input": "libs/translations-shared/src/lib/assets/il8n/",
            "output": "./assets/shared-translations"
          }
        ]

The issue seems to be the sourceRoot defined in the lib's project.json . Therefore it breaks if trying to specify "apps/my-app/src/assets" .
Also, trying to use iln8 twice for storybook assets config results in duplicate iln8 folders in the assets folder (if you run build storybook). This actually works but looks off.
I've changed it to the above and it requires you to adjust the paths then for the storybook-specific translateModule that was created.
It's not overly complex, but it may not be the neatest solution to the issue. Either way, it's working now for both and that's good enough for me.

storybook [文档]:Angular翻译 - ngx-translate集成(在工单中提供解决方案)

描述问题

1条答案

相关问题

热门标签

最新问答