Angular 7 Series Part 1: Creating Enterprise-Level Applications

The first piece in a series on creating enterprise-level applications which have mono-repo architecture using Angular CLI

Shakil Khan
Dec 3, 2018 · 4 min read
Image for post
Image for post

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.

Image for post
Image for post
angular7 project workspace setup

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.

Image for post
Image for post
Angular7 workspace folder structure

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.

Image for post
Image for post
home application

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

Image for post
Image for post
home application folder structure

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

Image for post
Image for post
home app in development mode

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.

Image for post
Image for post
home app in production mode

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.

Image for post
Image for post
npm scripts

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.

Better Programming

Advice for programmers.

Sign up for The Best of Better Programming

By Better Programming

A weekly newsletter sent every Friday with the best articles we published that week. Code tutorials, advice, career opportunities, and more! Take a look

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Shakil Khan

Written by

Software Engineer, Kaplan Test Prep

Better Programming

Advice for programmers.

Shakil Khan

Written by

Software Engineer, Kaplan Test Prep

Better Programming

Advice for programmers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface.

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox.

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic.

Get the Medium app