CODEWITHSUNDEEP
angularnpmangular-cli
Ulises 2010
Ulises 2010

Reputation: 508

Different versions for different clients

I am developing an application in Angular 6 that I hope to install on many clients.

Each one of them will need a personalization, but they will have many common parts.

What I would like is to have a directory structure:

/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

As you can see, the customer1 has customized the navbar and the home, the 2 only the home and the 3 the footer.

What I would like is that when making the 

npm run build

I could do something like 

npm run build customer1

and take the files that are under your directory if they exist and if there are not those that were under components.

Do you think it would be possible?

Upvotes: 1

Views: 390

Answers (4)

Ulises 2010
Ulises 2010

Reputation: 508

Solvin other issues with this I ask this:

Exclude files from angular environment

And the answer helps me to find more elegant solutions using the enviroments properties (I create as many as I need) and insted use fileReplacements, use this variable for use diferents functions in my .ts files or with ng-if or ng-show in my .html files.

Upvotes: 0

Juan Medina
Juan Medina

Reputation: 154

You can achive it with enviroments:

  • Create a new enviroment for your customers
  • Create a new folder with all the files you want to change
  • Open angular.json file and search for the configurations option in the project, and search your enviroment (maybe to create it you have to do it).
  • Look for the fileReplacements and use this syntaxis to replace the ones you need.
  • If you want to serve too this enviroment you have to include it, in
    the angular.json file in serve/configurations.

Upvotes: 0

Calidus
Calidus

Reputation: 1404

Yes you could do something similar with npm scripts and ng build --environment=, but it doesn't necessary mean you should. Have you considered making your common components part of a Angular library or a npm package and having an app/repo per customer? Your could also combine this with Angular Schematics if you wanted to.

Upvotes: 1

Ali Niaki
Ali Niaki

Reputation: 138

To do these kind of managements/automations the best tool that Angular made available is Angular Schematics. Take a look at this tutorial, it's a great place to start.

In your case, you need to create a schematics that creates an angular project with all the common parts set up which I suppose will look like this:

/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

Then, after generating the base code you or your clients would be able to modify it and build it like every other Angular project.

Upvotes: 1

Related Questions