Based on user1964629's answer I came up with the following solution
I have a white label web-app that I wanted to apply a different themes to based on which client it was for.
First I made two different apps in the angular-cli-json file. I basically duplicated the one that was there and added an name property to each one:
"apps": [{
"name": "client1",
...
},
{
"name": "client2",
...
}]
Client specific SCSS
In the app directory I created a folder named scss
and added some files and subdirectories like so:
As you can see there is a client specific folder for each client containing a _theme.scss
file. This file has client specific scss variables.There are also some general .scss
files in the root of the scss
directory.
I then added this to the client 1 app in angular-cli.json:
"stylePreprocessorOptions": {
"includePaths": [
"scss/client.client1",
"scss"
]
},
and this to client 2:
"stylePreprocessorOptions": {
"includePaths": [
"scss/client.client2",
"scss"
]
},
Adding the includePaths
meant I could import scss
files without specifiying the full path to the file, and at the same time only load the theme file relevant to the client. I changed my styles.scss
to look like this:
@import 'theme'; // <--- this would be different based on which client app is running.
@import 'global'; // <--- this would be the same for both apps
It also meant I could @import 'theme'
into any other .scss
file in my project to access theme specific variables.
Client specific environments
I went a little further from here and created client specific environment files too. Like this:
I updated the angular-cli.json for client 1 like this:
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.client1.ts",
"prod": "environments/environment.client1.prod.ts"
}
And for client 2 like this:
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.client2.ts",
"prod": "environments/environment.client2.prod.ts"
}
Then added a 'client' property for each environment. This allowed me to make decisions in my scripts based on which client app was running. This is, for instance, what the environment.client1.prod.ts
file looks like:
export const environment = {
production: true,
client: 'client1'
};
Finally running everything
I could then run both client apps at the same time client like so:
ng serve --app client1 --port 4201
ng serve --app client2 --port 4202