Managing and utilizing various Angular applications simultaneously

I am new to Angular and I'm exploring the possibility of accessing another application that is hosted on a different port, has its own repository, and uses a different version of Angular. Let's assume I have two Angular Typescript projects named A and B.

=======================================
Project A configuration: 
Angular 1.5
Typescript 2
Grunt for build tasks.
running on localhost:8080 

=======================================
Project B configuration: 
Angular 2
Typescript 2
Webpack for build tasks.
running on localhost:9000
=======================================

Both apps, A and B, are hosted on separate repositories. Now, imagine project A being the master and having a tab (button) that, when clicked, should open the index page from project B.

The button is labeled 'microapp', and here is the source code:

$scope.showMicroApp = function showMicroAppView(isMessagePanelOpen) {
           // $scope.isEnvelopeOpen = !!isMessagePanelOpen;
            $scope.changeRoute('/microapp');
            $location.path('/microapp'); // HOW DO I REDIRECT?
        };

What is the purpose of this?

I aim to achieve greater flexibility in the front-end part of my project. This way, if I make changes to a specific screen/module, I won't have to rebuild the entire project. I can just modify the affected module and see the updates immediately. Is this feasible? Will I need to alter the existing setup of project B?

If you have any suggestions or guidance, please share them.

Answer №1

If you have hosted Applications A and B separately, it is necessary to navigate using absolute paths instead of relative ones.

You only need to build modules that have been changed, as both applications are hosted independently on your web server, ensuring they function correctly.

https://i.sstatic.net/ABcd5.png

I trust this information will be beneficial to you.

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

Angular 2 Routing 3.0: Paying Attention to Letter Case

let routesList: Routes = [ { path: 'x', component: xComponent }, { path: 'y', component: yComponent }, { path: 'zComponent', component: zComponent } ]; When entering "x" in the URL, it navigates to the component page. Ho ...

Refining a Form Collection in Angular

I have a list of cars that I am converting into a FormArray to display as buttons in an HTML list. My goal is to filter these cars based on their names. CarComponent.html <input #searchBox id="search-box" (input)="search(searchBox.value) ...

How come the value passed to the component props by getServerSideProps is incorrect?

I have been facing an issue while trying to retrieve data from 4 different endpoints and then passing them as props using getServerSideProps in Next.js. Even though the "courses" variable returned from getServerSideProps does contain the necessary course ...

Converting a custom object into a params-object in Typescript/Angular 12

I am seeking to utilize the fromObject property of HttpParamsOptions in order to convert a custom object into a params-object. Here is an example where it works: foo(): void { const testObject = { id: 123; name: 'test'; someExa ...

My root route is being loaded by jQuery, which also triggers the loading of all the scripts again using X

After struggling with this issue for a few days, I've decided it's time to seek some help. The problem I'm facing is during the update of my Angular app from v1.3.0-beta.17 to v.1.3.x (head). I keep receiving a message saying WARNING: Tried ...

What is the best way to obtain the actual name of a component's method?

Just to clarify the next part: payU serves as the Internet payment operator I'm currently facing a significant challenge when it comes to integrating my Angular app with payU payments. Due to security reasons, I have opted not to store or pass credit ...

How can I use AngularJS or JavaScript to initiate a file download with an ajax request?

Description I am currently in the process of developing a web application that allows authenticated users to create events and send out invitations to those events. One specific requirement I have is to implement a feature where event organizers can down ...

whether you need a cache factory or a regular object

As I embark on creating a mid-sized Angular application, one of my requirements is to store data and utilize it at the end of the user journey for sending to the server (as per company security policy regarding customer data transport). As a relatively new ...

Calculate the cumulative values in ng-repeat using AngularJS

I used ng-repeat to iterate through a JSON array. I calculated the number of nights by utilizing the dayDiff() function. Now, I need to find the total number of nights for all invoices. My project is built with AngularJS. Is there a way to retrieve the to ...

AngularJS not compatible with Splice functionality

Currently, I am working on a form for an Items list that allows users to add, edit, and delete items. While the add and edit functionalities are working correctly, I am facing some issues with the delete functionality. Below is a snippet of my code that i ...

When I set up the proxy in Vite, it redirects me to the specified proxy URL on my local server. I specifically intend to utilize it solely for making API

Below is my Vite configuration file vite.config.ts: import { defineConfig } from 'vitest/config' import vue from '@vitejs/plugin-vue' import { quasar, transformAssetUrls } from '@quasar/vite-plugin' const path = require(&apos ...

An issue has been identified with React's HTML input maxLength feature where it does not display an error

Within my form, I have an input field that currently does not include validation for a maximum length. <input type="text" className="form-control" id="company" onBlur= ...

Unexpected behavior when trying to catch errors in Node.js await block

After logging, my node process exited unexpectedly E callback: [Function: RP$callback], E { serviceName: '....', E errno: 'EAI_AGAIN', E name: 'RequestError', I had anticipated that the code below would handle ex ...

Using AngularJS: Trigger a directive method as a callback directly from the controller

I have a specific directive that utilizes a jQuery "multiselect" plugin to improve any select element with the attribute "filtermultiselect". The issue I am facing is that the select element is populated through an ajax call, and I do not want the directiv ...

How can Angular be used for live search to provide precise search results even when the server does not return data in the expected sequence?

Currently, I am in the process of constructing a website for one of my clients. The search page on the site is designed to update search results as you type in the search bar - with each keystroke triggering a new search request. However, there's an i ...

What is the best way to filter a collection of nested objects with distinct keys within an angular ng-repeat loop?

Currently, I am attempting to understand how to filter an object of objects within an Angular ng-repeat loop. Data $scope.data = {key1:value1, key2:value2, key3:value3}; $scope.filterStr = 'ey'; NG-Repeat <div ng-repeat="(val, key) in data ...

Consolidate identical controllers found in various modules

My Application utilizes multiple AngularJS modules that handle similar data, but each module is used in different sections of the page. I have created numerous controllers to assign data to $scope variables, resulting in a lot of repetitive code. I am conc ...

Utilize Angularjs in MVC .net core for seamless file and data uploading!

<input type="file" ng-model="ch.FileName" id="file" name="myFile" nchange="angular.element(this).scope().saveChapter(this.files)"/> Link to Action Method, JavaScript, and More Code ...

Disabling the ability to select Saturday and Sunday within the Ionic calendar application

I came across a tutorial online at "" that explains how to create an event calendar in Ionic. I followed the tutorial and successfully implemented it, but I now have a specific issue. I want to make Saturdays and Sundays unselectable, meaning users should ...

What is the best way to sort through an Array of photo filenames?

https://i.sstatic.net/04cws.pngI have a list of image names that contain UUIDs. images [ "auditid_626_UUID_666666_time__1582577405550.jpg", "auditid_626_UUID_999999_time__1582577405554.jpg", "auditid_626_UUID_999999_time__15825 ...