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.
To follow along with this piece, you will need to install Node.js version
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
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
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:
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
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
ng build home --prod --watch
Then in the second terminal, serve app the using
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.