使用 Angular Ivy 从构建中排除组件答案

【问题标题】：Exclude components from build using Angular Ivy使用 Angular Ivy 从构建中排除组件
【发布时间】：2021-10-05 08:24:31
【问题描述】：

我正在从一个 Angular 项目构建两个独立的站点。我正在使用环境变量来跟踪单个站点。

export const getHomeComponent = (): any => {
  switch (environment.sitename) {
    case EmbassyName.BHCL:
      return HomeComponent;
    case EmbassyName.NL:
      return HomeNlComponent;
  }
};

我看到这两个组件存在于生产版本中。有角常春藤有办法实现摇树算法吗？我的角度版本是 11.2.14

【问题讨论】：

我不认为摇树可以解决这个问题，因为这是运行时逻辑。这样做的方法是使用我认为的提供者逻辑？因此，在它所属的模块中，您要么提供一个类，要么提供另一个类（带有工厂函数或 useClass - 我不确定）。
你能给我一个例子/博客链接吗？ @MikeOne
不——现在我想多了——这可能无论如何都行不通。可能的工作是为每种语言设置不同的环境文件（并针对配置=的环境文件） - 您从中导出正确的组件。因此，对于 NL 环境文件，类似于 export { HomeNLComponent as HomeComponent from '../../pathtocomponent'} 之类的，然后从您需要它的模块中的环境文件中导入它。不是 100% 确定这是否可行？我可能会选择在运行时有条件地延迟加载组件或“NL”模块。
我认为有条件地延迟加载组件不会将其从构建包中排除。
它将作为单独的块在构建中，但只会按需加载。

标签： javascript angular webpack angular-ivy

【解决方案1】：

正如@MikeOne 所指出的，可以通过在环境文件中为 Component 别名来实现解决方案。

在environment.bhcl.ts:

export { HomeComponent } from '../app/public/home/home.component';

在environment.nl.ts:

export { HomeNlComponent as HomeComponent } from '../app/public/multiple-embassy/nl/home-nl/home-nl.component';

在模块/路由模块文件中，我正在导入 HomeComponent 并声明它。

由于环境文件导入，我得到了循环依赖错误的副作用。也许制作一个environment-service 可以解决它。

编辑：我发现的另一个解决方案是使用ng g application app-bhcl 等分隔项目。可以使用ng g library lib 创建库模块并将常用函数放在那里。这样就没有办法单独放置package.json，所以多个项目将不得不使用相同的node_modules。

编辑 2：另一种解决方案是在构建/服务期间创建单独的 app.modules/app-routing.modules 并在 angular.json 中替换它们。

        {
          "replace": "src/app/app.module.ts",
          "with": "src/app/app.nl.module.ts"
        },
        {
          "replace": "src/app/app-routing.module.ts",
          "with": "src/app/app-routing.nl.module.ts"
        }

之后，您将创建单独的模块（在我的情况下为 public.module 和 public-nl.module）并将它们放置在各自的 app/app-routing 模块中

【讨论】：