Angular 6 - Build a dynamic single page housing various applications within

I am faced with the task of developing multiple applications using Angular 6. Each application will have its own set of components, services, and more.

However, there is also a need for shared services, components, directives, and other elements that will be utilized across all applications.

Furthermore, I must create a root application that will serve as a container for the previously created applications. This root application should have the capability to display the individual applications in tabs, side by side.

What would be the most effective approach to take when building an application structure like this? What architectural design principles should be considered, and which techniques or frameworks would be best suited for this project?

Any advice or insights on this matter would be greatly appreciated. Thank you.

angularshelltypescriptarchitectureangular6

Answer №1

The key to a successful Angular project is to focus on creating a single, cohesive application. If you need to separate components or features within your app, utilizing modules and structuring them accordingly is crucial.

Managing multiple Angular applications in the pipeline can be cumbersome when it's time to compile for production. It's much more efficient to streamline this process by consolidating everything into one main app.

It's highly recommended to implement Modules and Lazy loading Modules in order to optimize performance and organization within your Angular projects.

Answer №2

Angular 6 introduced the idea of projects in the Angular configuration file, allowing for applications or libraries to be created based on specific requirements.

To start, creating a default Angular 6 application can be done using the following command: https://github.com/angular/angular-cli/blob/master/docs/documentation/new.md

ng new <app-name>

Add additional application projects by using the ng generate application command, as outlined here: https://github.com/angular/angular-cli/wiki/generate-application

ng generate application <application-name>

To include a library in your project, use the ng generate library command found here: https://github.com/angular/angular-cli/wiki/generate-library

ng generate library <library-name>

To run a specific application within your Angular 6 configuration file, utilize the ng serve command and specify the desired application. For example, to serve an application named MyCoolNewSite:

ng serve --project <application-name>

I am currently designing a new UI application following this method. It appears to be meeting my requirements so far, although I am still in the early stages of the project.

Please inform me if you find this information helpful at all.

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

How can deep nested properties be set in Angular without triggering a re-render of the entire component tree using the onPush change detection strategy

I recently created a simple menu component using Angular. In this menu, menu represents the ul element and each menu-item corresponds to a li. The data structure looks something like this: menu = [ { text: "level-1", children ...

angular

What is the process for eliminating moment locales from an Angular build?

When I build my Angular 5 application with the command: ng build --prod --sm I noticed that the main.js file contains a lot of excess space occupied by moment. It seems all the locales are being loaded when I include: import * as moment from 'momen ...

angularangular2-moment

When using the imported function, a TypeError occurs: "... is not recognized as a valid function."

I often use a function across multiple files, and it works perfectly like this: import moment from 'moment'; let monthAsString = (month: number): string => { return moment().locale('de').month(month - 1).format("MMMM"); } config ...

typescript

Using [(ngModel)] on a field within an object that is nested inside another object

I am facing a challenge as I attempt something that may or may not be feasible. Within an Angular form, I have an object structured like this: export class NewUserRegisterModelDTO{ userData:UserDetailModelDTO; roles:RoleModelDTO[]; ownerData:O ...

angularformsobjecttemplatesstructure

Toggle the disable state of a button depending on a specific condition

I have a scenario where I am fetching data from a server, and I need to apply a filter to a specific column. The requirement is that if the "bought" column (boolean) has a value of true, then the edit button should be disabled; otherwise, it should be enab ...

htmlangularhtml-tableangular10

Tips for assigning an external variable using Angular RxJS map function?

I am currently working on making code more reactive and declarative by using the async pipe to update the template. I'm facing a challenge with changing a variable that was previously set in the subscribe() method. Updating this variable from the map ...

angularrxjsrxjs-observables

Error: React-Redux Provider is being called incorrectly

I am currently working on a small application to get familiar with using Redux Toolkit. My understanding of React/Redux mainly comes from an outdated Udacity course. Although the error message lists the top 3 reasons for this particular error, none of the ...

reactjstypescriptreduxreact-reduxredux-toolkit

Rearrange an element in an array from last to first position using typescript

I am working with an array that looks like this var column = ["generic complaint", "epidemic complaint", "epidemic1 complaint", "epidemic2 complaint", "bal vivah", "name"] My goal is to move the last element of the array to the first position, resultin ...

angulartypescript

Is it possible for an uninitialized field of a non-null literal string type to remain undefined even with strict null checks in

It seems that there might be a bug in Typescript regarding the behavior described below. I have submitted an issue on GitHub to address this problem, and you can find it at this link. The code example provided in that issue explains the situation more clea ...

typescript

What should be the proper service parameter type in the constructor and where should it be sourced from?

Currently, I am faced with a situation where I have two Angular 1 services in separate files and need to use the first service within the second one. How can I properly type the first service in the constructor to satisfy TypeScript requirements and ensure ...

angularjstypescript

Component designed for handling child routing components with no content or functionality

Is there a method to create a child route in Angular2 without automatically navigating to it? In my application, I have a navigation component that directs to different modules. One module, called catalog, has a child route to display specific object deta ...

routesangular

Tips for passing values and their corresponding labels during a click event in Angular 4

When I click the plus button, I want to hide the li element. Even though the data is passing correctly, the li element is not clearing as expected. The desired outcome is for the li instance to be removed once the plus button is clicked. https://i.stack.im ...

htmlangulardom

Round off Kendo Column Chart edges and add a personalized highlight shade

Is there a way to create a kendo column chart with rounded borders similar to the image provided? Below is the code snippet I am currently using. Additionally, how can I customize the hover-over color for the columns in the chart? <kendo-chart-series& ...

angularchartskendo-uikendo-chart

Can someone guide me on configuring Material-UI DataGrid in React to have multiple headers with column span?

Is there a way to achieve multiple headers with column span in the Material-UI DataGrid component? view image example ...

reactjstypescriptmaterial-ui

Leverage JavaScript libraries utilizing namespaces within your Angular application

I have a unique JavaScript library that includes functions organized within namespaces. For example: var testNamespace = { insideFunction: function(str) { alert(atr); } }; Now, I am trying to integrate these functions into my Angular app.c ...

javascriptangulartypescript

How can I configure a mocked dependency in Jest to return a specific value in a function?

I am currently working on simulating a mongoose model to facilitate unit testing for an express controller. To keep things simple, I've removed all unnecessary code and provided below the specific scenario I'm dealing with. Here's the snippe ...

typescriptunit-testingjestjsmocking

Streamlined method for creating forms and charts within SharePoint

When it comes to creating charts and forms on SharePoint, what is the best approach for maximizing efficiency? Using AngularJS web parts with CRUD operations. Modifying standard forms and integrating charts using JavaScript libraries and CSS. Are there ...

angularjsangularsharepointsharepoint-2013sharepoint-designer

Getting the current browser window in the renderer within Electron 14: A step-by-step guide

Previously, I utilized the code below to retrieve the current window from the renderer: import {remote, BrowserWindow} from 'electron'; export function getCurrentWindow(): BrowserWindow { return remote.getCurrentWindow(); } With electron 14 ...

typescriptelectron

Using Typescript to create a generic return type that is determined by the type of a property within an object union

Consider the following scenario: type Setting = { key: "option_one", value: number, } | { key: "option_two", value: string, } export type SettingKey = Setting["key"]; // "option_one"|"option_two ...

typescripttypescript-generics

Angular 16 SSR encounters a TypeError when the 'instanceof' operator is used on a value that is not an object

I have been facing an issue while updating my Angular application from version 15 to 16. Everything seems to work fine with Angular, including building for Angular Universal without any errors. However, when I attempt to serve using npm run serve:ssr, it t ...

javascriptangulartypescriptangular-universalserver-rendering