New: "An Array of Applications in an Angular 2 Portal"

I am currently in the process of creating a dynamic portal with Angular 2. This portal will have the capability to accommodate multiple applications (portlets) and function as an inclusive container. The portlets themselves may or may not be built using Angular 2, each managed by separate teams working on independent projects. Within this framework, the portal is responsible for authentication management, push notifications, and facilitating communication between the various portlets. The ultimate goal is to allow for seamless updates and bug fixes to individual portlets without requiring a new release of the entire portal. I would appreciate any suggestions or options you may have for achieving this functionality. Thank you in advance.

Answer №1

Resolved the issue by creating a versatile component, a Header featuring a Menubar. This intelligent Menubar can smoothly navigate within various parts(routes) of your current application, as well as direct to external portals and links. Any new application looking to integrate simply needs to inject a script for the menu bar to seamlessly appear on top of their interface.

Furthermore, the menubar's menu options are tied to the users' entitlements, all managed through a centralized entitlement system.

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 and .NET Core 2.0 triggering an endless loop upon page refresh detection

My application, built with dotnet core 2.0 and angular 2, allows me to view member details. The process begins with a list page displaying all the members from a SQL Server database. Each member on the list has a link that leads to an individual details pa ...

Is transitioning from AngularJS to Angular truly imperative?

We currently have a project built with AngularJS, but its support is ending and there are potential security vulnerabilities (CVEs) present. Do we need to transition to a different framework? Our project primarily involves front end development with data b ...

Integrating @types/arcgis-js-api into an Angular 5 project

Incorporating arcgis-js-api types into my angular5 application has been a challenge. Whenever I attempt to import the types in multiple components, an uncaught reference error occurs: __esri is not defined. I made sure to include arcgis-js-api in the typ ...

My default value is being disregarded by the Angular FormGroup

I am facing an issue with my FormGroup in my form where it is not recognizing the standard values coming from my web api. It sets all the values to null unless I manually type something into the input field. This means that if I try to update a user, it en ...

Is there a way to conceal :before content in the parent element by hovering over the child element?

Here is the HTML code I currently have: <li *ngFor="let menu of menus" class="{{ menu.attributes.class }} menu-items" [attr.data-title]="menu.label"> <a [routerLink]="[menu.url||'/']" [queryParams]="menu.refParameter3 ? menu.refPara ...

Encountering issues when utilizing the 'got' package

I encountered an issue while using 'got' version '11.8.3', resulting in the following error: /app/node_modules/got/dist/source/core/index.js:696 throw new TypeError('The payload has been already provided'); ^ TypeError: The p ...

Using EventEmitter for Component Communication in Angular 2

I have a duo of components: AppComp and SimulationComp AppComp consists of a single function : createEmptyPromise() { return Promise.resolved('') } and it showcases the following html structure : <simulation-comp (simu)='createEm ...

TypeScript Builder Design Pattern mirroring Java's approach

In TypeScript 4.6.2, I am working on incorporating the Builder Pattern similar to Java. While I have come across suggestions that this may not be the ideal approach, I have certain limitations when it comes to module exports. export class HttpRequest { ...

Storing Images in MongoDB with the MEAN Stack: A Guide using Node.js, Express.js, and Angular 6

I am currently working on developing a MEAN Shop Application, and I have encountered an error while attempting to store the product image in MongoDB. typeError: cannot read the property 'productimage' of undefined Below is the route function fo ...

The variable 'this' is not recognized within the foreach loop

While working on my TypeScript code and iterating through an array, I encountered an issue with accessing the 'this' object. Here's a snippet of the code: console.log('before iterate, this = ' +this); myarray.days.forEach(function ...

Using an asynchronous function as a prop in a React component triggers the @typescript-eslint/no-misused-promises warning

My submitNewPatient function is asynchronous and currently throwing an error message @typescript-eslint/no-misused-promises from elint. I'm wondering if there is a way to adjust the function to resolve this error. const submitNewPatient = async (value ...

Using Angular to store checkbox values in an array

I'm currently developing a feature that involves generating checkboxes for each input based on the number of passengers. My goal is to capture and associate the value of each checkbox with the corresponding input. Ultimately, I aim to store these valu ...

Guide to making a Material Design Radial effect animation

I am looking to create a unique toolbar effect by following the material design radial reaction choreography guideline. https://i.stack.imgur.com/6oB8r.gif I want to achieve this using an angular 2 transition, but I need some guidance on how to implement ...

A step-by-step guide on integrating dynamic components in vue-class-component

After successfully using vue-class-component in my project, I decided to introduce a new component for production only: import store from '../store/Index' let storeTmp = process.env.NODE_ENV === 'production' ? store : null @Component({ ...

Struggling to implement React.RefObject in TypeScript

I am currently in the process of converting this class module to Typescript, but I am having trouble defining the object reference correctly. To view the example, click here. My current definition for the reference holder is as follows: private wrapperRe ...

Locating an element using the index of the EventTarget type in TypeScript

I'm having trouble accessing an input element on a event.target object by using event.target[0] in TypeScript, resulting in the following error message: The element implicitly has an 'any' type because the expression of type '0' c ...

The functionality of the mat-radio-group is not rendered properly within an Angular formArray

Form elements that do not function properly with the formArray have been identified. Despite rendering, clicking on a button does not trigger any action. The editChoice() event fails to execute even when a break point is set in it. The controls also fail ...

Unexpected issue with resolving a Typescript string enum from a string value

As I was working on my project, I had an enumeration set up like this export enum RootPage { HOME = <any>'HomePage', LOGIN = <any>'LoginPage', TEST01 = <any>'Test01Page', LAUNCHPAD = <any>&apos ...

Angular 6 canvas resizing causing inaccurate data to be retrieved by click listener

The canvas on my webpage contains clickable elements that were added using a for loop. I implemented a resizing event that redraws the canvas after the user window has been resized. Everything works perfectly fine when the window is loaded for the first ti ...

The requested property does not exist within the 'CommonStore' type in mobx-react library

I'm diving into the world of TypeScript and I'm running into an issue when trying to call a function from another class. I keep getting this error - could it be that functions can only be accessed through @inject rather than import? What am I mis ...