Ways to distribute a single Angular instance to various customers

In the process of developing an Angular application, I am faced with the challenge of deploying it to multiple clients. Each client has their own database in the backend, which means they have distinct APIs. For instance, when Client One enters , I need to utilize api1 and logo1 specific to that client. Similarly, if Client Two inputs , I must use api2 and logo2 unique to them, and so forth. Hence, I am on the lookout for a configuration file or similar tool that can allow me to input URLs, APIs, and logos for each individual client of my application.

Answer №1

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.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Disabling Immediate Row Checkbox in Angular Datatable Based on Column Data

Is there a way to prevent the checkbox in a row from being checked based on certain column data? In my datatable, I need to implement a condition where if firstname="Superman", then the checkbox for that particular row should be disabled to preve ...

JQuery value does not transfer to Angular 2 textarea

My Angular 2 application features an input textarea field: <textarea id="projectDescription" required [(ngModel)]="projectDescription" [formControl]="createNewForm.controls['projectDescription']" style="margin-bottom:-2%;width:50%;"></t ...

Using Google OAuth2Client with Angular 4

I am encountering an issue while trying to verify the ID token for my client using Google's example. You can find the example code here. const {OAuth2Client} = require('google-auth-library'); // <-- facing issues here const client = new ...

The challenge of extending a TypeScript generic to accept an Array type with unrelated elements

I have a function that resembles the following mock: // All properties in this type are optional. interface MyType { a?: string } // The return result type of `cb` is kept as the final result type. const f = <T extends ReadonlyArray<MyType>> ...

Node.js segregates values before inserting them into the MySQL database

I need to input values into my table that I receive from the frontend. Here is my code: const Workers = function (workers) { this.id = workers.id, this.workers = workers.workers, this.room = workers.room, this.team = wor ...

Resolve the conflict with the upstream dependency in Angular

I understand that the solution to this issue can be found on SOF, but utilizing --legacy-peer-deps or --force is not an option for me on my production server. I am eager to comprehend the root cause of this error and find a proper resolution. Upon install ...

The art of linking Observables on the fly in rxjs and angular

In my current project, I am facing a challenge where multiple events can be triggered from an object. These events are handled by a component and then sent to a REST API. The issue arises when I need to ensure that calls to the REST API for a specific reso ...

What is the best way to highlight rows for expansion in a primeng table?

Currently, I am experimenting with primeng table row expansion by following this specific example: https://stackblitz.com/edit/github-7gxyuy?file=src/app/app.component.html Despite my efforts to have each expansion row selected individually, I encountered ...

Switching buttons with AngularJS

I am currently working on a Github search app using the Github API in Angular. My goal is to make it so that when the user clicks the "Add to Favorite" button, the button disappears and the "Remove Favorite" button is displayed instead. I attempted to achi ...

A guide on transforming an Observable of one type into an Observable of a different type

Currently, I am working on an Angular application that utilizes NGRX for state management. One of the challenges I am facing is dealing with a selector that returns an Observable. export const mySelector = createSelector(state, (state: IState) => state. ...

Combining keys from an array of objects into a single array categorized by key names

When working with an array of objects, I need to filter and extract all the keys. One challenge I face is when there are nested objects, I want to concatenate the key names to represent the nested structure. For example: const data = [ id: 5, name: "S ...

Guide to generating a fresh array of objects by combining values from two arrays!

I'm having difficulties combining two arrays of objects (retrieved from blockchain data) into a new array based on the values of the objects. The aim is to extract the most recent interaction with a user. A simplified yet closely resembling represen ...

Typescript's Intersection Types: The Key to Overlapping Properties

Looking to create a type-safe utility function in Typescript 4.0 for comparing properties of two objects, my initial code snippet is below: export function propertiesMatch<O extends object, T extends O, S extends O>(first: T, second: S, props: (keyof ...

Angular unit testing - Accessing child components within an overlay container

I've created a unique custom component called MatSelectControls. Its implementation looks like this: <component-im-testing> <mat-select> <mat-select-controls></mat-select-controls> <mat-option *ngFor="..."> ...

Using Typescript to Import One Namespace into Another Namespace

Is it possible to export a namespace from one typescript .d.ts file and then import that namespace into another .d.ts file where it is utilized inside of a namespace? For instance: namespace_export.d.ts export namespace Foo { interface foo { ...

Managing Errors in Angular 4 while maintaining the click functionality

When I interact with a button to submit my data to the api server, I also need to verify if my token has expired. If it has indeed expired, the system should automatically refresh the token and store it in the local storage. The process for checking and r ...

Tips for directly referencing the z-index property within a class in HTML - is that possible?

Is it permissible to include the following elements within a <div class="z-index-2"> tag? Is this considered correct or incorrect? Blockquote ...

Issue with rendering Base64 image array strings in FlatList component in React Native

In my RN App, I am trying to display a FlatList with Image Items but it seems like I have missed something. I am retrieving blob data from my API, converting it to a String using Buffer, and then adding it to an Array. This Array is used to populate the F ...

Callback after completion of a for loop in Angular TypeScript

During the execution of my javascript async function, I encountered a situation where my printing code was running before the div creation. I needed to ensure that my print code would run only after the completion of the for loop, but I struggled to find a ...

Can you explain the mechanics behind Angular Component CSS encapsulation?

Is it possible to avoid CSS conflicts when using multiple style sheets? Consider Style 1: .heading { color: green; } And Style 2: .heading { color: blue; } If these two styles are applied in different views and rendered on a layout as a Partial Vi ...