Load a separate Angular application within an existing Angular application in a dynamic way

I am currently seeking a solution in Angular on how to integrate multiple applications into one, such as:

applicationA    
- main.js
- vendor.js
- 1.js (chunk)
applicationB
- main.js
- vendor.js
- 1.js
- 2.js

applicationA will load applicationB on route /appb and also be able to access appb/subroute.

The main objective is to allow different teams to develop separate apps independently so that when changes are made in applicationA, the other applications called by it do not need to be redeployed.

I came across this article which got me close: https://medium.com/angular-in-depth/building-extensible-dynamic-pluggable-enterprise-application-with-angular-aed8979faba5. However, I could not make it work with sub routes and it is based on a set of modules rather than an application.

Then, there's another article by Manfred Steyer , which seems to be exactly what I need. Unfortunately, it is built on "next" technology which is still under development and not part of Angular's current roadmap (as far as I know).

Question: Has anyone successfully implemented a similar solution and can provide some guidance?

Answer №1

Have you considered leveraging Nx, the tools provided by Nrwl.io? It could greatly improve your situation, as it is highly capable and reliable. Setting it up is straightforward and it offers impressive power and stability.

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

Reset the angular child component trigger by its parent component, which is a modal popup

I'm facing an issue with my Angular application where I have a child component within a parent modal window implemented using ngx-smart-modal. When I close the modal using the method: this.ngxSmartModalService.getModal('ModalNameComponent') ...

angular directive to receive an object

When I have a table and click on a row, the information is supposed to be displayed in a different component using the @input decorator. However, instead of displaying the correct result in my other component, I am getting [object Object]. table.html < ...

Troubleshooting issue: Unable to display data using *ngFor in Angular 4

Currently, I am developing an application that utilizes HttpClient to fetch data from a local JSON file. The JSON file contains images and descriptions, with the images also being local. While I am able to successfully log the data in a local array, I am e ...

Angular: cut down lengthy text with an ellipsis and display more upon click

I am currently working with Angular 8, Angular Material, and Bootstrap utilities. Below is the code snippet I have been using: <div class="p-1 text-break" *ngSwitchDefault [innerHTML]="cell.value | longText"& ...

Error: Http post not found in Ionic framework version 3 and Angular versions 4 and 5

When using Postman, I successfully made a POST request to the following URL: https://myapp.herokuapp.com/login with the body containing email and password credentials. However, when attempting the same action in my provider, by sending a similar POST requ ...

The selected attribute does not function properly with the <option> tag in Angular

Currently, I am faced with a challenge involving dropdowns and select2. My task is to edit a product, which includes selecting a category that corresponds to the product. However, when I open the modal, the selected group/category is not displayed in the d ...

Utilizing Filestack in Angular 2

I'm currently working on integrating image uploading functionality into my Angular 2 App, and I have decided to utilize Filestack (formerly filepicker.io) for storing the images. Following Filestack's recommendations, I added the necessary script ...

Can you explain the meaning behind this TypeScript variable declaration syntax?

Can anyone explain the meaning of this code snippet: myCollection: Collection|any = null; I'm having trouble understanding it... Does it indicate that myCollection is set to type Collection, (which is an interface), with a default value of null? But ...

The universe's cosmic energy is unable to retrieve uploaded documents

Struggling for days now with the issue of not being able to run any real tests using Karma. I can run basic sanity tests that don't require imports, but as soon as I try to import something from my app, I encounter this error: system.src.js:1085 GE ...

A step-by-step guide on setting up a database connection with .env in typeorm

I encountered an issue while attempting to establish a connection with the database using ormconfig.js and configuring .env files. The error message I received was: Error: connect ECONNREFUSED 127.0.0.1:3000 at TCPConnectWrap.afterConnect [as oncomplete] ( ...

Tips for integrating Typescript Definition files with Visual Studio 2017

I have a challenge with my ASP.NET Core 2.0 application where I am attempting to incorporate TypeScript and jQuery. While TypeScript integration has been successful, I am facing issues with jQuery as it does not provide me with intellisense. Despite trying ...

What methods are most effective when utilizing imports to bring in components?

Efficiency in Component Imports --Today, let's delve into the topic of efficiency when importing components. Let's compare 2 methods of importing components: Method 1: import { Accordion, Button, Modal } from 'react-bootstrap'; Meth ...

Dependency mismatch encountered in Angular 2 @angular/material

I recently added Angular2 material using npm, but I encountered an error while trying to install another package. npm ERR! peerinvalid The package @angular/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="95f6faf8f8fafbd5a7bba5b ...

The phenomenon of Angular 6 Caching with Http Interceptor: Observing how the Map operator alters the cached HttpResponse within the code

I have successfully implemented a cache in my Angular 6 app using an HttpInterceptor. It stores responses in memory and serves them with a TTL if they exist. However, I encountered a problem where the code responsible for making Http requests uses the map ...

Display a secure background image using Angular 6

Even though I have successfully generated the image url to avoid any sanitizer errors, my background image is still not displaying. Is it necessary for me to utilize the "changingThisBreaksApplicationSecurity" property in order for the image to appear corr ...

"Error message: Trying to import a component in Angular, but encountering a message stating that the component has no exported

When creating a component named headerComponent and importing it into app.component.ts, an error is encountered stating that 'website/src/app/header/app.headerComponent' has no exported member 'headerComponent'. The code for app.headerC ...

Issue: (SystemJS) the exports variable is not defined

In the process of developing a .net core mvc + angular application, I encountered an interesting situation. The MVC framework handles user management, and Angular takes over when users navigate to specific areas of the application. Initially, I integrated ...

Error: Could not find module: Unable to locate 'rxjs/add/observable/throw' in 'D:AngularhttpErrorHandlingExamplesrcapp'

I'm working on an Angular project to practice error handling, but I encountered an issue when trying to import the 'throw' module. The error message reads as follows: Error Message: "ERROR in ./src/app/employee.service.ts Module not found: E ...

A step-by-step guide on updating environment configurations in VSTS Release Management

I am exploring the use of VSTS Release Management to streamline the deployment process for my Web Application across various deployment locations (dev, test, prod). Currently, I rely on different builds to achieve this, but I aim to consolidate everything ...

Can you outline the process for troubleshooting the issue of not being able to set breakpoints on a Chrome launch configuration when working with Angular

Using Angular 13 / Chrome 111 / VSCode 1.76.1 / Node 16.19.1 I am encountering a strange issue where I am unable to set breakpoints in VSCode after my code has live-reloaded. Yesterday, the configuration in my launch.json was working fine: "configur ...