Create Angular 5 Application Using .Net Core 2.0 Template In Visual Studio 2017

Once you have the template installed, open your Visual Studio 2017 -> Create New Project -> Select Installed tab and search with Angular5, now we would be able to see Angular5TF template,



Click on OK, Visual Studio will create a well-structured Angular 5 application for you,



Now let us make sure that the application is Angular 5 application.

For that open package.json, here you will be able to see angular version 5.0.0 and Angular CLI version 1.5,



Next step is to install WebPack.

What is WebPack?

WebPack is a module bundler.

WebPack is used to determine the dependencies, run transformations and create bundles that you can provide to your browser.



It is a good practice to add WebPack to the starting point that is why we will add below lines in package.json file if it is not there already:

"postinstall": "webpack --config webpack.config.vendor.js"



You may get below error if you have not added WebPack details in the package.json file,

Cannot find module './wwwroot/dist/vendor-manifest.json'

To avoid this error, we need to run above WebPack command first. That is why we have added the command to the package.json file.

After adding above line, build the project. First time when you build the solution, it would take several minutes as it installs some dependencies.

Run the Angular application

Now click on IISExpress to run the application.

After 5-10 seconds, the application might have compilation error as below in Vendor.js file,

An exception has been encountered. This may be caused by an extension.

You can get more information by examining the file 'C:\Users\neel\AppData\Roaming\Microsoft\VisualStudio\15.0_b495e641\ActivityLog.xml'.



This error comes because IE does not support several functions used in the project. You need to import some libraries to resolve this error. Have a look here to resolve the error.

Once the error is resolved, the application will run properly,



Hope it helps.