Posts Tagged Build

How to generate and publish Angular 5 build files using NodeJS in Asp.net Application

Introduction

In this article we will discuss on the procedures to generate Angular 5 build files from NodeJS. We will also look at Publishing the same files to Deployment folder.

PreRequisites

  • Make sure NodeJS is installed in your machine
  • Install Angular cli using command “npm i -g @angular/cli@latest

Description

To generate Angular build files in Asp.Net project, we need to create custom build commands and update the .csproj file. I have copied the commands available on .Net core project to generate angular build files.

After adding the below commands, Asp.Net application will generate angular build files in a folder namely “Dist” in root folder of our project.

To add the commands in cs proj file,

  • Right click on project file and select Unload Project option
  • Right click again on project file and select Edit option

CsProj Edit

  • Add a Target Node and paste the commands inside it.

In above codes first section is to check if node is available on your machine and displays an error message if node is not installed.

Next two commands are important as those are the ones which creates angular build files. Notice the “ng build”, this is an Angular CLI command which compiles the application into an output directory. We set two commands one for Release and another one for Debug configuration.

Additionally, like ng build, we can also use production build command “ng build –prod”.

The Include attribute in _CustomFiles node specifies the folder to find the files for deployment is “dist” All files and folders inside dist folder will be deployed during publish process.

Using Publish to deploy the code in Visual Studio

To deploy the files using Publish option we need to make some additional changes. We need to inform the MsBuild to grab the files from dist folder for deployment.  Below commands will perform the same.

Since we are using Asp.Net application project, after build, couple of folders like bin, src will be created. We don’t need these folders for an Angular Project deployment. Hence, we will use below commands to exclude those folders from deployment package.

Next line of code, will cause the “AfterBuild” target to be executed,, when files will be copied for deployment.

Complete Code

References Used

  1. Deploying Extra Files in Asp.Net Web Deployment

 

 

Advertisements

, , , , ,

Leave a comment