Angular5 with ASPNET Core2
Ritam Atarthy
Software Engineer
This article explains the steps for developing modern website/web application using Angular5 and Visual Studio 2017 as the IDE.
  1. Download and Install Visual Studio 2017. You can get the VS 2017 community edition free from here.
  2. Depending on the built version of Visual Studio 2017, you might have ASP.Net Core 1.1 installed only. However, we need ASP.Net core 2.0 to get the  Angular5 template for creating solution. Download and install the setup for ASP.NET Core 2.0 from here.
  3. Depending on the Visual Studio built version, you might have to download and install NPM(Node package Manager) and node.js from here, if not already installed. NPM downloads and adds the Javascript References to your solution.
  4. Now that the installations are done, create a new project with ASP.Net core 2.0 Web Application in Visual Studio 2017.

  5. Now select Angular in the next popup window of the 'New Project' wizard. Here you can select other client framework like ReactJS as well. As of now, we will go with AngularJS.
  6. The solution is created. Now Nuget And NPM downloads and adds Dot Net and Javascript references respectively to the solution. Here, being inside your client's network i.e. if you are accessing the internet under any firewall or proxy settings, you need to configure the same proxy settings into NPM.
    npm config set https-proxy http://proxy.company.com:8080


  7. Now Run the solution. AngularJS 5 and ASP.NET Web API has stated working on top of DOT NET Core 2.0. First Link(Home) displays some static HTML content. 2nd link (Counter) has a button which adds 1 to the counter value. 3rd link (Fetch data) initiates Web API calls and shows some random data.


     

Now this works perfectly in browsers like Chrome and IE Edge. However, we need to do something extra for running the angular codes in Internet Explorers (like in this case application's counter/2nd link).

On clicking "Increment" button, IE throws the below error in the browser console.

Unable to get property 'apply' of undefined or null reference
To resolve this issue in Internet Explorer, follow the below steps:
  1. We need to find and edit polyfills.ts present within the solution. In case, the file is not present, follow the below steps.
  2. Run the command in the command prompt to configure the latest angular CLI globally.
     npm install -g @angular/cli@latest 
        
  3. In the command prompt, set the current directory to the solution folder and run the NPM command to configure the latest angular CLI into the project solution.
    cd C:\Users\Ritam\Source\Repos\WebApplication1
    npm install --save-dev @angular/cli@latest
    npm install mdn-polyfills --save
    This will bring the polyfills.ts file into the solution. Edit the file and un-comment the code lines for IE Browsers.
  4. Remove "angular2-router-loader" reference from package.json and run the NPM command to install angular-router-loader. The former reference(angular2-router-loader) is deprecated. Find and edit "webpack.config.js" to change "angular2-router-loader" reference to "angular-router-loader".
    npm install --save -dev angular-router-loader
  5. Find and edit "boot.browser.ts" file to include the below 3 lines sequentially on top. 
    import 'core-js/client/shim';
    import 'zone.js';
    import 'reflect-metadata';
Now Run the solution. It works in IE as good as in Chrome and Edge. Cheers. 
** If your code is being managed under source control like TFS, Git, etc., include and check-in the "vendor-manifest.json" file as well to let other team members Run/Debug the solution easily.
 
Institute Finder



Enter Full Institute Name

Usefull Links
© 2021 Eduforum. All Rights Reserved.

Enter login details.

UserName Password

Recover Password

Enter your Registered Email Address to receive new password.
Subscribe Newsletter