如何设置在Angular中构建期间打包文件的顺序答案

【问题标题】：How to set order in which files packaged during build in Angular如何设置在Angular中构建期间打包文件的顺序
【发布时间】：2021-03-20 01:40:30
【问题描述】：

我有需要支持本地化的 Angular 项目。为此，我们在加载模块之前从 json 文件加载翻译。在 main.ts 我添加了以下几行：

loadTranslationsFromJson(extractUserLocale(), 'assets/i18n').then(m => {
  platformBrowserDynamic()
    .bootstrapModule(AppModule)
    .catch(err => console.error(err));
});

除了在类之外的服务中声明的一些 const 变量外，一切都在工作。例如：

const commonPhrase = $localize`Enter your birthday`;
@Injectable()
export class OnboardingService {
  // any variables declared here with $localize work fine
}

正如我在上面的示例中所理解的，因为 const commonPhrase 在浏览器中的 Javascript 加载/编译时加载，它不是 Angular 模块的一部分，因此它是在调用 bootstrapModule(AppModule) 之前创建的。结果变量commonPhrase 不会被翻译。

它告诉我，如果我可以确保在已部署的包（即大型 JS 文件）中首先注入我的 main.ts 文件（因此将首先由浏览器执行），我可以解决这个问题。在构建期间有没有办法指定添加到包中的文件的顺序？或者如何将 main.ts 放在包的首位？

【问题讨论】：

为什么不能在服务类中将其声明为readyonly 属性？由于您没有导出此常量，因此您可以将其作为只读属性保留在类中。
我个人可以，但因为我们有大约 20 名开发人员，所以有人会犯这个错误。我更喜欢自动化或消除潜在的错误来源。如果我找不到解决方案，那么将回退到通过 PR 执行它。
创建一个全局国际化此类字符串的方法，并将您的字符串包裹在其周围。你无法控制它。

标签： angular deployment build

【解决方案1】：

想出了答案。它不是 ht ebuild 中模块/文件的顺序，而是它们激活/导入的顺序。如果您查看 main.js，它是您的主应用程序模块的捆绑包，您将在其中看到所有模块/服务/组件等作为 hashmap。顺序无关紧要，但我发现重要的是首先导入的模块。我为引导本地化创建了单独的模块，并将其添加为 AppModule 的顶部导入。这样做了。

【讨论】：