A suggestion would be to utilize a package manager for this task, such as yarn or npm. Most likely, npm is already installed on your local machine by default. Within the angular.json file, you can incorporate various configurations for each production system.
For more detailed information, refer to this article
In summary: You will need to duplicate the environment.prod.ts file, rename them accordingly, update the angular.json file with the new environments, and when building the site for each URL, use the --configuration url1
command line parameter.
Here is an abridged snapshot from the angular.json:
{
"$schema":"./node_modules/@angular/cli/lib/config/schema.json",
...
}
Example for the environment.ts (rename this to environment.url1.ts):
export const environment = {
endpoints: {/* endpoint will go here */},
production: false,
apiBaseUrl: 'http://url1.com',
}
Create clear commands in the package.json file for easy execution later. For instance: npm run build-url1. This command should be defined within your package.json:
"build:url1": "ng build --prod --configuration:url1"
Utilize the environment.ts file for logo1 and logo2 as well. Place your logos inside the project src folder and reference them in the environment.ts. Component should create a separate variable to access these logos in the component html. Example:
<link rel="shortcut icon" href="{{ logoPath }}">
Research extensively for further assistance on this topic. This post offers a starting point, but StackOverflow is intended for specific issue resolutions rather than providing generic solutions. If you encounter an unanswered problem, feel free to ask a question about it.