Angular 我们是否可以使用webpack来决定在构建时使用业务配置在应用程序中提供哪些组件？

我正在构建一个有角度的应用程序。我们的组件库中有数百个组件。我想为特定的客户端加载特定的组件。如果我能在构建时使用业务配置并决定特定客户机需要哪些组件，那就太好了，而不是用代码编写逻辑并根据业务配置呈现这些组件

假设我的客户机A、B分别使用组件x、y、z和p、y、z。A和B有独立的部署。我是否可以使用一个网页包构建一个独立为a和B提供服务的包？

是的，您可以。
有几种技术可以实现这一点：

文件替换

例如，您有如下内容的

组件.module.ts

：

@NgModule({
 declarations() {
  XComponent,
  YComponent,
  ZComponent,
 }
})
class ComponentsModule{}

它将用于客户端

A

。 然后您应该创建包含以下内容的文件

components-b.module.ts

（模块类的名称应该相同，但文件名可以不同）：

要应用文件替换，您应该将自定义配置添加到

angular.json

：

 "configurations": {
  "production": {
    ...
  },
  "clientB": {
    "fileReplacements": [{
      "from": "path/to/components.module.ts",
      "to": "path/to/components-b.module.ts"
    }]
   }

然后运行它：

ng serve--configurateion=clientB

请注意：angular团队建议为不同的客户端创建不同的项目，而不是配置

网页包别名

与第一种方法几乎相同，但来自不同的方面。 您可以使用

customWebpackConfig

属性并获得自己的webpack配置。
在此配置中，您可以定义别名：

然后在应用程序中这样使用它：

---

从'@myAliasToComponentsModule'导入{ComponentsModule}

谢谢您的回答！我一定会尝试这两种方法。

 "configurations": {
  "production": {
    ...
  },
  "clientB": {
    "fileReplacements": [{
      "from": "path/to/components.module.ts",
      "to": "path/to/components-b.module.ts"
    }]
   }

    {
     resolve: {
      alias: {
       '@myAliasToComponentsModule': client === 'A' ? 'path/to/moduleA' : 'path/to/moduleB';
      }
     }
    }