Angular 6 - Create single page with multiple applications inside

Question

I need to build multiple applications in Angular 6. Each application has its own components, services, etc.

But I also need to have services, components, directives, etc shared by all applications.

Next I need to create a root application that will include the applications created before. This root application should be able show applications side by side in tabs.

What is the best way to do an application like this? How to build the architecture and what techniques/frameworks to use?

Thanks.

Answer 1

One Angular project is to create one application, only one. if you want to share things and split your application into pieces you need modules and then create modules with the architecture needed.

Having multiple Angular apps at the end of your pipeline you will need to compile for production all these apps, instead of only one

Recommended to use Modules and Lazy loading Modules

Answer 2

Starting in Angular 6 they introduced the concept of projects within the Angular configuration file. A project can be either an application or a library, depending on your needs.

To get started with this you would need to first create your Angular 6 default application (reference https://github.com/angular/angular-cli/blob/master/docs/documentation/new.md ).

ng new <app-name>

Once you have the default application you can then add additional application projects to it like using the ng generate application command (reference: https://github.com/angular/angular-cli/wiki/generate-application )

ng generate application <application-name>

To add a library to it you would need to use the ng generate library command (reference: https://github.com/angular/angular-cli/wiki/generate-library )

ng generate library <library-name>

To serve up a particular application within your Angular 6 configuration file you would use the ng serve command and specify the application you want to serve. For example, to serve an application name MyCoolNewSite you would execute:

ng serve --project <application-name>

I am in the process of architecting a new UI application using this approach. So far it really seems to be working for my needs, but I am still early in the project.

Please let me know if this is at all helpful.