Combining Multiple Angular Applications into a Single One

Jeffry Houser
Dec 5, 2018 · 10 min read
Image for post
Image for post
Cover Photo by Ricardo Gomez Angel on Unsplash

Setup Your Angular Workspace

You’ll need Angular CLI installed. Such a setup is beyond the scope of this article. Go here and follow instructions.

ng new my-app --routing
Image for post
Image for post
cd my-app
ng serve
Image for post
Image for post
Image for post
Image for post
Angular Logo used per CC BY 4.0

Create your Sub Applications

When I created the initial prototype, I used the Nrwl Extensions for Angular because they had a feature to support multiple applications in the same workspace. However, the multiple application functionality is now baked directly into the Angular CLI so this post will focus on that. Instead of using ng new to create the workspace, we want to use `ng generate application`. This will create a new application, residing right next to the default application:

ng generate application app1 –-routing
Image for post
Image for post
ng generate application app2 –-routing
Image for post
Image for post
  • node_modules: All the packages that had to be installed for the application to run.
  • src: The main application’s source
  • src/app: The main application code.
  • src/assets: The assets folder for the main application
  • src/environments: The environment configurations
Image for post
Image for post
  • app1/app: The source code for the app1.
  • app1/assets The assets for app1.
  • app1/environments: The environment configs for app1.
  • app1-e2e: End to End Test for app1.
  • app2: The source code for your second custom sub application.
  • app2/app: The source code for the app2.
  • app2/assets The assets for app2.
  • app2/environments: The environment configs for app2.
export class AppComponent {
title = ‘app1’;
}
export class AppComponent {
title = 'app2';
}
ng serve –-project app1
Image for post
Image for post
Image for post
Image for post
ng serve –-project=app2
ng serve

Injecting Sub Apps into Main application

You’ve created a new workspace, with a main application, and two sub-applications, so how do you combine them? You probably know that you can inject one Angular module inside of another using the imports command. In fact, that is the default use of the routing module. Open up the app.module.ts from any one of our projects:

imports: [
BrowserModule,
AppRoutingModule
],
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
@NgModule({})
export class App1SharedModule{
static forRoot(): ModuleWithProviders {
return {
ngModule: AppModule,
providers: []
}
}
}
const providers = []
providers: providers,
providers: providers
imports: [
BrowserModule,
AppRoutingModule,
App1SharedModule.forRoot(),
App2SharedModule.forRoot()
],
import {App1SharedModule} 
from "../../projects/app1/src/app/app.module";
import {App2SharedModule}
from "../../projects/app2/src/app/app.module";

Sharing routes

There is one “nut left to crack”! How do we share routes from the sub-applications with the main applications? Surely this is an important part of embedding one application within another, right? I found a way. First, we’re going to want to create some routes in both sub-applications.

ng generate component view1--project=app1
Image for post
Image for post
ng generate component view2 —-project=app1
ng generate component nav --project=app1
<app-nav></app-nav>
<p>
app1 view1 works!
</p>
<app-nav></app-nav>
<p>
app1 view2 works!
</p>
<a routerLink="/app1/one" >One</a>  | 
<a routerLink="/app1/two" >Two</a>
const routes: Routes = [];
const routes: Routes = [
{ path: 'app1/one', component: View1Component },
{ path: 'app1/two', component: View2Component },
{ path: 'app1', redirectTo: 'app1/one' }
];
{ path: '**', redirectTo: '/app1' }
Image for post
Image for post
Image for post
Image for post
ng generate component view1 —-project=app2
ng generate component view2 —-project=app2
ng generate component nav —-project=app2
<app-nav></app-nav>
<p>
app2 view1 works!
</p>
<app-nav></app-nav>
<p>
app2 view2 works!
</p>
<a routerLink="/app2/one" >One</a>  | 
<a routerLink="/app2/two" >Two</a>
const routes: Routes = [
{ path: 'app2/one', component: View1Component },
{ path: 'app2/two', component: View2Component },
{ path: 'app2', redirectTo: 'app2/one' },
];
ng serve -–project=app2
Image for post
Image for post
Image for post
Image for post
const routes: Routes = [
{path: 'app1',
loadChildren: '../../projects/app1/src/app/app.module#App1SharedModule'},
{path: 'app2',
loadChildren: '../../projects/app2/src/app/app.module#App2SharedModule'},
{ path: '**', redirectTo: '/app1/one'}
];
imports: [
RouterModule.forRoot(routes),
App1SharedModule.forRoot(),
App2SharedModule.forRoot()
],
ng generate component nav
Image for post
Image for post
<app-nav></app-nav>
<br/><br>
<router-outlet></router-outlet>
<a routerLink="/app1" >App 1</a> | 
<a routerLink="/app2" >App 2</a>
ng serve
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Final Thoughts

I had a lot of fun building this prototype and can see advantages of composing an app with this method. It helps to separate logic and reduce cognitive load when developing the app. Being able to focus is important for the productivity of any programmer. Although we decided not to use this approach, it provided some useful leanings along the way.

disney-streaming

- A Disney Technology Blog

Jeffry Houser

Written by

I’m a technical entrepreneur who likes to build cool things and share them with other people. I’ve been programming applications for a long time.

disney-streaming

- A Disney Technology Blog

Jeffry Houser

Written by

I’m a technical entrepreneur who likes to build cool things and share them with other people. I’ve been programming applications for a long time.

disney-streaming

- A Disney Technology Blog

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store