Angular项目i18n提取异常：仅识别根组件未扫描子组件

问题描述 #

我在基于Atomic Design组件架构的个人项目中实现Angular i18n功能，作为Angular新手此前未遇问题，但近期执行ng extract-i18n时遇到困扰：命令仅能识别app.component.html中的内容，无法扫描子文件夹内的组件。

复现步骤 #

我在空白项目中复现了该问题：

ng new testProject
cd testProject
npm i @angular/localize
ng generate component testA
ng generate component components/testB

为每个组件添加简单i18n标记：

<!-- src/app/app.component.html -->
<p i18n="@@app">app</p>

<!-- src/app/test-a/test-a.component.html -->
<p i18n="@@testA">test-a works!</p>

<!-- src/app/components/test-b.component.html -->
<p i18n="@@testB">test-b works!</p>

执行提取命令：

ng extract-i18n --outputPath="src/i18n"

生成的src/i18n/messages.json仅包含根组件的内容：

{
  "locale": "en-US",
  "translations": {
    "app": "app"
  }
}

对比测试 #

我找到一个类Atomic Design架构的Demo项目做对比：

git clone https://github.com/PhraseApp-Blog/angular-i18n-2022
cd angular-i18n-2022
npm install
ng extract-i18n --outputPath="src/locale" --format="json"

为嵌套组件src/app/layout/navbar/navbar.component.html添加i18n标记后，生成的messages.json能正确提取所有组件的国际化内容。

排查情况 #

对比两个项目的配置文件（angular.json、package.json等），仅发现两处差异：

• Angular版本：我的项目为最新版，Demo项目为13.3.0
• tsconfig.json的module版本：我的项目为最新版，Demo项目为es2017/es2022

我推测遗漏了扫描子文件夹的配置，但未找到相关设置方法。

更新后的问题 #

根据提示，组件需被其他组件/模块引用才能被提取i18n内容。空白项目中新建的组件因未自动导入到模块，所以未被识别；Demo项目生成组件时会自动加入app.module.ts，因此可被提取。但我的项目中已被引用的header组件，其i18n内容仍无法被提取，寻求解决方案。

内容的提问来源于stack exchange，提问作者The Revanchist