Categories: angular, typescript

Angular: Change templateUrl & styleUrls on NG serve and Deploy

1 answer

I have a base code that I implements on many customers with a custom style&template for each one. on each component I have a configuration like this:

@Component({     selector: 'app-header',     templateUrl: './customer1.header.component.html',     styleUrls: ['./customer1.header.component.scss'] }) 

Every time I have to work on a different customer I have to manually change templateUrl/styleUrls on each component.

All answers that I have found that tries to solve this are for dynamically change the template when the code is already deployed, that means to deploy all templates to all my customers, not plausible.

I would like to set an enviroment variable to set the customer template and use it when running ng serve or when I deploy the code for an specific customer.

All answers to this question, which has the identifier 60843827

The best answer:

When angular compiles it changes the templateUrl and styleUrls into code. So it won't be possible to change them at runtime in the way you are doing it.

Depending on how much custom code you have for each customer you could solve it in a couple of ways.

One solution could be

Using the fileReplacements function from angular cli you could create an file for each customer.

// customers/customer.customer1.ts export const customer = {   customerName: 'Customer 1' } 

and in your angular.json you add an configuration for each customer

// angular.json "myappname": {       "architect": {         "build": {           "builder": "@angular-devkit/build-angular:browser",           "configurations": {             "customer1": {               "fileReplacements": [                 {                   "replace": "apps/myappname/src/customers/customer.ts",                   "with": "apps/myappname/src/customers/customer.customer1.ts"                 }               ]             }, 

then when you build you can set the configuration

ng build --configuration="production,customer1" 

Another solution

create a header component for each customer and lazy load them using ngComponentOutlet https://netbasal.com/welcome-to-the-ivy-league-lazy-loading-components-in-angular-v9-e76f0ee2854a

Last questions

how do i remove the switch on my home screen?
how to edit the JS date and time to update atuomatically?
How to utilize data stored in a multidimensional array
Powermockito not mocking URL constructor in URI.toURL() method
Android Bluetooth LE Scanner only scans when phone's Location is turned on in some devices
docker wordpress container can't connect to mysql container
How can I declare a number in java that is more than 64-bits? [duplicate]
Optaplanner solutionClass entityCollectionProperty should never return null error when simple JSON object passed to controller
Anylogic, get the time a pedestrain is in a queue
How do I fix this syntax issue with my .flex file?
Optimizing query in PHP
How to find the highest number of a column and print two columns of that row in R?
Ideas on “Error: Type com.google.firebase.iid.zzav is referenced as an interface from com.google.firebase.messaging.zzd”?
JCIFS SmbFile.exists() and SmbFile.isDirectory() return false when it exists and I can listFiles()
PHP total order
Laravel booking system design
neural net - undefined column selected
How to indicate y axis does not start from 0 in ggplot?
Fragments in backStack
Spinner how to change the data