fbpx Skip to content

Aquent | DEV6

Building Two Angular Apps from One Codebase

Written by: Chad Upton

We tend to think about web development projects as applications, and they often are, but at a higher-level they are really about solving problems.

An Example

Let’s say your client is a cell phone retailer and they hire you to build an application to help their customers choose the cell phone that is right for them — so you build an application to filter and search cell phone attributes.

Maybe that same client also wants their customers to be able to login to a portal where they can customize their mobile plan. Then you build an app to choose the plan, select add-ons, etc. This solution, although similar to the first, is distinct in that it does more than one type of task. Therefore, you might build multiple angular applications to solve the problem instead of just one monolithic angular application.

There are different ways you could structure that. Perhaps the main angular application is all one application, but the login page has some functionality that warrants being an angular application too (language switching for example). In that case, you might make the login page a separate angular application.

I like that idea, because that makes it very easy to lock down access to the main application so only authenticated users can access it. In other words, if a hacker wants to probe beyond the login page then it will be much more challenging unless they’re a customer.

Two Ways to Cook an Egg

Of course, you could have two angular applications and two builds and a script that brings them together at some point, but the much easier solution is to use Angular CLI — it has the ability to build multiple angular applications together. It also builds them in sequence, so you can have one application that depends on another. This also makes it easy to work on the code between both applications since you can easily have them in one IDE workspace.

How to Build Two Angular Applications Together

If you’ve never used Angular CLI, it’s a great way to start an angular application. To install:

npm install -g @angular/cli

Then to initialize a new application:

ng new my-new-project

That creates a small example project skeleton. When you initialize a new application with Angular CLI, it defines that application in the angular-cli.json file under the “apps” array. Let’s create a second application with:

ng new login

Now we have a second application called login. To build both applications together we’ll need to put one inside the other. Let’s move the “src” directory of my-other-project to a “login” directory inside my-new-project application:

mv -v my-other-project/src my-new-project/login

To define two applications, you’ll simply add our login application object to that array. Be sure to add a “name” property and set it to login. Note, for this example you ONLY need a name property on the “login” application, as we see below:

"apps": [
 
  {
 
    "root": "src",
 
    "outDir": "dist",
 
    "assets": [
 
      "assets",
 
      "favicon.ico",
 
      "login"
 
    ],
 
    "index": "index.html",
 
    "main": "main.ts",
 
    "polyfills": "polyfills.ts",
 
    "test": "test.ts",
 
    "tsconfig": "tsconfig.app.json",
 
    "testTsconfig": "tsconfig.spec.json",
 
    "prefix": "app",
 
    "styles": [
 
      "styles.css"
 
    ],
 
    "scripts": [],
 
    "environmentSource": "environments/environment.ts",
 
    "environments": {
 
      "dev": "environments/environment.ts",
 
      "prod": "environments/environment.prod.ts"
 
    }
 
  },
 
  {
 
    "name": "login",
 
    "root": "login",
 
    "outDir": "src/login",
 
    "assets": [
 
      "assets",
 
      "favicon.ico"
 
    ],
 
    "index": "index.html",
 
    "main": "main.ts",
 
    "polyfills": "polyfills.ts",
 
    "test": "test.ts",
 
    "tsconfig": "tsconfig.app.json",
 
    "testTsconfig": "tsconfig.spec.json",
 
    "prefix": "app",
 
    "styles": [
 
      "styles.css"
 
    ],
 
    "scripts": [],
 
    "environmentSource": "environments/environment.ts",
 
    "environments": {
 
      "dev": "environments/environment.ts",
 
      "prod": "environments/environment.prod.ts"
 
    }
 
  }
 
]

You can see that I’ve also set the login app to be built into the main application with the “outDir” of the login app. Take note that I added “login” to the assets list of the main application. That way, when the main application is built it will bundle the login application too. Then you’ll set your server authentication to allow access to the login folder, and nothing else, until the user is authenticated.

If you’ve used Angular CLI before then you’re probably familiar with building using the “ng build” command. There might be times when you don’t want to build both applications, such as when you’re just working on one of them, and in those cases you can use a special switch that tells Angular CLI which application you want to build. To build the “login” app, use the “login” name that you added above:

ng build --app login

Of course, you can add additional switches such as “-w” to watch for changes (and automatically rebuild):  

ng build --app login -w

As it turns out, that simply builds all of the applications defined in the angular-cli.json file. So, to build both of your applications you simply execute:  

ng build

Now you can build two applications from one Angular project!

Sign up for our Angular Course

$1,995 CAD – 4 Days

View Course Details