In this series, I will create enterprise-level applications which have mono-repo architecture using Angular CLI. In these applications, I will add angular components, services, pipes, routing, angular material, ngrx, PWA, custom libraries, SEO support, theming support, server-side rendering using angular universal, advanced oAuth and many other things with step-by-step instructions. Stay tuned!

The main goal of this series is to show, how we can best utilize available tools, schematics, and CLI to build an enterprise-level Angular application easily and quickly.

Prerequisites

To follow along with this piece, you will need to install Node.js version 10.x.x and angular-cli version 7.x.x

Step 1: Install Angular CLI

You need to install angular-cli globally in your machine.

npm install -g @angular/cli

Step 2: Create a GIT Repository

For this series, I have created the angular7-series repository. For each part, I will add a new branch so you can easily track all the changes. In your case, you can choose any name for your project. Once you have the repository created then clone it locally.

Step 3: Set Up an Angular 7 Project

Outside of your cloned project directory, you need to run,

ng new your_project_name --createApplication=false

ng new angular7-series --createApplication=false

It will prompt a few questions, once you answer those, then it will create an empty workspace. In my project, I am setting router and selecting stylesheet as SCSS.

Note: If you do not specify --createApplication=false, then it will add a default application within your workspace. But I prefer to create all applications separately.

Step 4: Create the Very First Application

Now I will create first application home within my workspace, from my project root directory, I need to execute this command:

ng g application home --prefix=home --routing=true --style=scss

Note: This command will create the home application along with routing setup and stylesheet as SCSS.

Our home application has been created within the projects directory. Iit also has set up home-e2e for us.

Step 5: Development Build with Live Reload

Before you serve the home application make sure you run:

npm install

Now you can serve this home application in development mode by executing the following command:

ng serve home -o --port 3000

Step 6: Production Build

You can create a production build with this command:

ng build home --prod

Serving production build with http-server

You can serve production build using http-server to replicate the production app locally.

npm install http-server -g

http-server -p 8000 -c-1 dist/home

Now if you open http://localhost:8000, you will see the home app is running.

Live rebuild in production mode

In some cases, you might need to rebuild your app in production mode multiple times, to test some features, like PWA, universal. You can minimize your time and effort by building your app in --watch mode. For this, you need to open two different terminals,

In the first terminal, run the build command with --watch:

ng build home --prod --watch

Then in the second terminal, serve app the using http-server:

http-server -p 8000 -c-1 dist/home

Now if you make any change in your application then terminal one will rebuild automatically. You just need to refresh your browser http://localhost:8000 to see the changes. I will show how to do an auto-reload on http://localhost:8000 with any build change, once I add PWA.

Step 7: Add Commands to the package.json Script

To keep our script simple, I am adding just two commands: one to create the prod build and another one for serving the app on development mode.

Step 8: Create the Second, Third, ….. Applications

Now I will create a second application named profile. To do this, I will repeat steps four to seven. You can follow the same steps to create as many applications as you need.

Resources

• Source code for this piece.
• To learn more about CLI commands, alias and arguments visit angular cli.

Other Articles

• Angular 7 Series Part 2: Creating a Custom Library
• Angular 8 Series Part-3: Upgrading to Angular 8
• Angular 8 Series Part 4: Add Angular Material