AngularJS (2+) Routing on Visual Studio (2015+)

This post shows how to configure Angular 2+ Routing on an ASP.Net MVC web application in Visual Studio 2015+

Step 1 – Make sure you have installed the prerequisites

Visual Studio 2015+
TypeScript 2.0 

Step 2 – Create ASP.NET MVC Web Application

Go to Visual Studio’s File New Project menu, expand the Web category, and pick ASP.NET Web Application 

Select the template MVC:

Step 3 – Configure Angular 2+

We need now to prepare our frontend to run Angular 2+

Create tsconfig.json which is the TypeScript compiler configuration file.

<span class="js__brace">{</span> 
  <span class="js__string">"compilerOptions"</span>: <span class="js__brace">{</span> 
    <span class="js__string">"target"</span>: <span class="js__string">"es5"</span>, 
    <span class="js__string">"module"</span>: <span class="js__string">"commonjs"</span>, 
    <span class="js__string">"moduleResolution"</span>: <span class="js__string">"node"</span>, 
    <span class="js__string">"sourceMap"</span>: true, 
    <span class="js__string">"emitDecoratorMetadata"</span>: true, 
    <span class="js__string">"experimentalDecorators"</span>: true, 
    <span class="js__string">"lib"</span>: [ <span class="js__string">"es2015"</span>, <span class="js__string">"dom"</span> ], 
    <span class="js__string">"noImplicitAny"</span>: true, 
    <span class="js__string">"suppressImplicitAnyIndexErrors"</span>: true 
  <span class="js__brace">}</span> 
<span class="js__brace">}</span> <br />Add package.json file to your project folder with the below code:<br />The most important things in your package.json are the name and version fields. <br />Those are actually required, and your package won't install without them. <br />The name and version together form an identifier that is assumed to be completely unique. <br />Changes to the package should come along with changes to the version.<br /><br />
<span class="js__brace">{</span> 
  <span class="js__string">"name"</span>: <span class="js__string">"angular-quickstart"</span>, 
  <span class="js__string">"version"</span>: <span class="js__string">"1.0.0"</span>, 
  <span class="js__string">"description"</span>: <span class="js__string">"QuickStart package.json from the documentation for visual studio 2015+ &amp; WebApi"</span>, 
  <span class="js__string">"scripts"</span>: <span class="js__brace">{</span> 
    <span class="js__string">"start"</span>: <span class="js__string">"tsc &amp;&amp; concurrently \"tsc -w\" \"lite-server\" "</span>, 
    <span class="js__string">"lint"</span>: <span class="js__string">"tslint ./app/**/*.ts -t verbose"</span>, 
    <span class="js__string">"lite"</span>: <span class="js__string">"lite-server"</span>, 
    <span class="js__string">"pree2e"</span>: <span class="js__string">"webdriver-manager update"</span>, 
    <span class="js__string">"test"</span>: <span class="js__string">"tsc &amp;&amp; concurrently \"tsc -w\" \"karma start karma.conf.js\""</span>, 
    <span class="js__string">"test-once"</span>: <span class="js__string">"tsc &amp;&amp; karma start karma.conf.js --single-run"</span>, 
    <span class="js__string">"tsc"</span>: <span class="js__string">"tsc"</span>, 
    <span class="js__string">"tsc:w"</span>: <span class="js__string">"tsc -w"</span> 
  <span class="js__brace">}</span>, 
  <span class="js__string">"keywords"</span>: [], 
  <span class="js__string">"author"</span>: <span class="js__string">""</span>, 
  <span class="js__string">"license"</span>: <span class="js__string">"MIT"</span>, 
  <span class="js__string">"dependencies"</span>: <span class="js__brace">{</span> 
    <span class="js__string">"@angular/common"</span>: <span class="js__string">"Version#"</span>, 
    <span class="js__string">"@angular/compiler"</span>: <span class="js__string">"Version#"</span>, 
    <span class="js__string">"@angular/core"</span>: <span class="js__string">"Version#"</span>, 
    <span class="js__string">"@angular/forms"</span>: <span class="js__string">"Version#"</span>, 
    <span class="js__string">"@angular/http"</span>: <span class="js__string">"Version#"</span>, 
    <span class="js__string">"@angular/platform-browser"</span>: <span class="js__string">"Version#"</span>, 
    <span class="js__string">"@angular/platform-browser-dynamic"</span>: <span class="js__string">"Version#"</span>, 
    <span class="js__string">"@angular/router"</span>: <span class="js__string">"Version#"</span>, 
 
    <span class="js__string">"angular-in-memory-web-api"</span>: <span class="js__string">"~0.2.4"</span>, 
    <span class="js__string">"systemjs"</span>: <span class="js__string">"0.19.40"</span>, 
    <span class="js__string">"core-js"</span>: <span class="js__string">"^2.4.1"</span>, 
    <span class="js__string">"rxjs"</span>: <span class="js__string">"5.0.1"</span>, 
    <span class="js__string">"zone.js"</span>: <span class="js__string">"^0.7.4"</span> 
  <span class="js__brace">}</span>, 
  <span class="js__string">"devDependencies"</span>: <span class="js__brace">{</span> 
    <span class="js__string">"concurrently"</span>: <span class="js__string">"^3.2.0"</span>, 
    <span class="js__string">"lite-server"</span>: <span class="js__string">"^2.2.2"</span>, 
    <span class="js__string">"typescript"</span>: <span class="js__string">"~2.0.10"</span>, 
 
    <span class="js__string">"canonical-path"</span>: <span class="js__string">"0.0.2"</span>, 
    <span class="js__string">"tslint"</span>: <span class="js__string">"^3.15.1"</span>, 
    <span class="js__string">"lodash"</span>: <span class="js__string">"^4.16.4"</span>, 
    <span class="js__string">"jasmine-core"</span>: <span class="js__string">"~2.4.1"</span>, 
    <span class="js__string">"karma"</span>: <span class="js__string">"^1.3.0"</span>, 
    <span class="js__string">"karma-chrome-launcher"</span>: <span class="js__string">"^2.0.0"</span>, 
    <span class="js__string">"karma-cli"</span>: <span class="js__string">"^1.0.1"</span>, 
    <span class="js__string">"karma-jasmine"</span>: <span class="js__string">"^1.0.2"</span>, 
    <span class="js__string">"karma-jasmine-html-reporter"</span>: <span class="js__string">"^0.2.2"</span>, 
    <span class="js__string">"protractor"</span>: <span class="js__string">"~4.0.14"</span>, 
    <span class="js__string">"rimraf"</span>: <span class="js__string">"^2.5.4"</span>, 
 
    <span class="js__string">"@types/node"</span>: <span class="js__string">"^6.0.46"</span>, 
    <span class="js__string">"@types/jasmine"</span>: <span class="js__string">"2.5.36"</span> 
  <span class="js__brace">}</span>, 
  <span class="js__string">"repository"</span>: <span class="js__brace">{</span><span class="js__brace">}</span> 
<span class="js__brace">}<br /><br />Create a sub-folder app on the root folder. On this folder we need to create our typescript files: <br />- main.ts<br />- app.module.ts<br />- app.component.ts<br />- app.component.html<br />- need to create also components to each route we need. <br />On this example we need to create two components Roo1Component and Root2Component that must be declares on app.module.ts</span> <br /><br />Create your index.html<br /><br />
<span class="html__doctype">&lt;!DOCTYPE html&gt;</span> 
<span class="html__tag_start">&lt;html</span><span class="html__tag_start">&gt; 
</span><span class="html__tag_start">&lt;head</span><span class="html__tag_start">&gt; 
</span>    <span class="html__tag_start">&lt;script</span><span class="html__tag_start">&gt;</span>document.write('<span class="html__tag_start">&lt;base</span> <span class="html__attr_name">href</span>=<span class="html__attr_value">"' + document.location + '"</span> <span class="html__tag_start">/&gt;</span>');<span class="html__tag_end">&lt;/script&gt;</span> 
    <span class="html__tag_start">&lt;title</span><span class="html__tag_start">&gt;</span>Angular2+ Routing<span class="html__tag_end">&lt;/title&gt;</span> 
    <span class="html__tag_start">&lt;base</span> <span class="html__attr_name">href</span>=<span class="html__attr_value">"/"</span><span class="html__tag_start">&gt; 
</span>    <span class="html__tag_start">&lt;meta</span> <span class="html__attr_name">charset</span>=<span class="html__attr_value">"UTF-8"</span><span class="html__tag_start">&gt; 
</span>    <span class="html__tag_start">&lt;meta</span> <span class="html__attr_name">name</span>=<span class="html__attr_value">"viewport"</span> <span class="html__attr_name">content</span>=<span class="html__attr_value">"width=device-width, initial-scale=1"</span><span class="html__tag_start">&gt; 
</span>    <span class="html__tag_start">&lt;base</span> <span class="html__attr_name">href</span>=<span class="html__attr_value">"/"</span><span class="html__tag_start">&gt; 
</span>    <span class="html__tag_start">&lt;link</span> <span class="html__attr_name">rel</span>=<span class="html__attr_value">"stylesheet"</span> <span class="html__attr_name">href</span>=<span class="html__attr_value">"styles.css"</span><span class="html__tag_start">&gt; 
</span> 
    <span class="html__comment">&lt;!-- load bootstrap 3 styles --&gt;</span> 
    <span class="html__tag_start">&lt;link</span> <span class="html__attr_name">href</span>=<span class="html__attr_value">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"</span> <span class="html__attr_name">rel</span>=<span class="html__attr_value">"stylesheet"</span><span class="html__tag_start">&gt; 
</span> 
 
    <span class="html__comment">&lt;!-- Polyfill(s) for older browsers --&gt;</span> 
    <span class="html__tag_start">&lt;script</span> <span class="html__attr_name">src</span>=<span class="html__attr_value">"node_modules/core-js/client/shim.min.js"</span><span class="html__tag_start">&gt;</span><span class="html__tag_end">&lt;/script&gt;</span> 
    <span class="html__tag_start">&lt;script</span> <span class="html__attr_name">src</span>=<span class="html__attr_value">"node_modules/zone.js/dist/zone.js"</span><span class="html__tag_start">&gt;</span><span class="html__tag_end">&lt;/script&gt;</span> 
    <span class="html__tag_start">&lt;script</span> <span class="html__attr_name">src</span>=<span class="html__attr_value">"node_modules/systemjs/dist/system.src.js"</span><span class="html__tag_start">&gt;</span><span class="html__tag_end">&lt;/script&gt;</span> 
 
    <span class="html__tag_start">&lt;script</span> <span class="html__attr_name">src</span>=<span class="html__attr_value">"systemjs.config.js"</span><span class="html__tag_start">&gt;</span><span class="html__tag_end">&lt;/script&gt;</span> 
    <span class="html__tag_start">&lt;script</span><span class="html__tag_start">&gt; 
</span>        System.import('app/main.js').catch(function (err) { console.error(err); }); 
    <span class="html__tag_end">&lt;/script&gt;</span> 
 
<span class="html__tag_end">&lt;/head&gt;</span> 
<span class="html__tag_start">&lt;body</span><span class="html__tag_start">&gt; 
</span>    <span class="html__tag_start">&lt;my</span>-app<span class="html__tag_start">&gt;</span>Loading App&lt;/my-app&gt; 
<span class="html__tag_end">&lt;/body&gt;</span> 
<span class="html__tag_end">&lt;/html&gt;</span> <br /><br />Angular will launch the app in the browser with our component and places it in a specific location on index.html.

Copyright © All Rights Reserved - C# Learners