针对不同客户的不同版本答案

【问题标题】：Different versions for different clients针对不同客户的不同版本
【发布时间】：2019-03-15 15:33:21
【问题描述】：

我正在使用 Angular 6 开发一个应用程序，希望安装在许多客户端上。

他们每个人都需要个性化，但他们会有很多共同的部分。

我想要的是有一个目录结构：

/src    
    /app        
        /components             
            /navbar
                /navbar.component.html
                /navbar.component.ts            
            /footer
                /footer.component.html
                /footer.component.ts            
            /store
                /store.component.html
                /store.component.ts             
            /home
                /home.component.html
                /home.component.ts      
        /customer1          
            /navbar
                /navbar.component.html
                /navbar.component.ts            
            /home
                /home.component.html
                /home.component.ts      
        /customer2          
            /home
                /home.component.html
                /home.component.ts      
        /customer3          
            /footer
                /footer.component.html
                /footer.component.ts

如您所见，customer1 已自定义导航栏和主页，2 仅主页和 3 页脚。

我想要的是在制作时

npm run build

我可以做类似的事情

npm run build customer1

如果存在，则获取目录下的文件，如果组件下不存在文件。

你觉得有可能吗？

【问题讨论】：

标签： angular npm angular-cli

【解决方案1】：

要进行此类管理/自动化，Angular 提供的最佳工具是 Angular Schematics。看看this tutorial，这是一个很好的起点。

在您的情况下，您需要创建一个原理图来创建一个角度项目，其中设置了所有常用部件，我想它看起来像这样：

/src    
/app        
    /components             
        /navbar
            /navbar.component.html
            /navbar.component.ts            
        /footer
            /footer.component.html
            /footer.component.ts            
        /store
            /store.component.html
            /store.component.ts             
        /home
            /home.component.html
            /home.component.ts

然后，在生成基本代码后，您或您的客户将能够像其他所有 Angular 项目一样对其进行修改和构建。

【讨论】：

【解决方案2】：

是的，您可以使用npm scripts 和ng build --environment= 做类似的事情，但这并不意味着您应该这样做。你是否考虑过让你的通用组件成为 Angular 库或 npm 包的一部分，并为每个客户提供一个应用程序/存储库？如果您愿意，也可以将其与 Angular Schematics 结合使用。

【讨论】：

【解决方案3】：

您可以通过环境实现它：

为您的客户创造一个新环境
创建一个包含所有要更改的文件的新文件夹
打开 angular.json 文件并搜索配置选项该项目，并搜索您的环境（也许创建它你必须这样做）。
查找 fileReplacements 并使用此语法替换您需要的。
如果您也想为这种环境提供服务，则必须将其包含在
serve/configurations 中的 angular.json 文件。

【讨论】：

【解决方案4】：

解决其他问题我问这个：

Exclude files from angular environment

答案帮助我找到更优雅的解决方案，使用环境属性（我根据需要创建多个）并使用 fileReplacements，使用此变量在我的 .ts 文件中使用不同的函数或使用 ng-if 或 ng -显示在我的 .html 文件中。

【讨论】：