NPM Build and Serve commands

In Angular project, you can run various commands through Node package manager(NPM) on the folder where the application is residing. Once such commands is for building the application.

ng build

Now, in our previous chapter, we look through the default project template provided by the Angular. But an important folder called as ‘dist’ was missing. This folder would contain the compiled JS files from the application.

The typescript(.ts) files are converted to JS files by the package manager on build. If there are multiple .ts, the manager will first convert each of them to .js file and then bundle them together to create one single js file which can be consumed in any other application. That’s the beauty of typescript and it achieves the Separation of concern technique in most efficient manager. In large projects, often it is needed to divide development teams to front-end, service, back-end. The SOC by angular helps in the cause.

After the build is successful.

The dist folder would then contains the below generated js files:

Now, we know the build is successful and its time to run the application. NPM provides the below command to run the application on browser:

Ng serve -port 100

Serve = run

100 = port number

–port == the current port

The successful prompt below:

Run the URL in chrome. Note the template is from Angular hence the default view looks like below.

That’s all about building and running the angular application.