不同客户的不同版本

Question

我正在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 

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

你觉得有可能吗？

Answer 1

您可以通过环境实现它：

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

Answer 2

要进行这些管理/自动化，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项目一样构建它。

Answer 3

是的你可以用npm scripts和ng build --environment=做类似的事情，但这并不意味着你应该这样做。您是否考虑过将公共组件作为Angular库或npm软件包的一部分并为每个客户提供app / repo？如果你愿意，你也可以将它与Angular Schematics结合起来。

Answer 4

索尔文其他问题我问这个问题：

Exclude files from angular environment

答案可以帮助我找到更优雅的解决方案，使用环境属性（我创建尽可能多的）和insted使用fileReplacements，使用此变量在我的.ts文件中使用diferents函数或使用ng-if或ng-show我的.html文件。