Post
Ask Question

Angular 4 Routing On VS 2017

This blog will show you how to configure Angular 4 routing on an ASP.Net MVC web application.

STEP 1 - Make sure you have installed the prerequisites

Without these prerequisites, the application will not run.

  • Visual Studio 2017
  • TypeScript 2.0 for Visual Studio 2017

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, as in the image below.

Select the template as MVC.

STEP 3 - Configure Angular 4

Now, we need to prepare our front-end to run Angular 4.

Create tsconfig.json which is the TypeScript compiler configuration file.
JavaScript
  1. {   
  2.   "compilerOptions": {   
  3.     "target": "es5",   
  4.     "module": "commonjs",   
  5.     "moduleResolution": "node",   
  6.     "sourceMap": true,   
  7.     "emitDecoratorMetadata": true,   
  8.     "experimentalDecorators": true,   
  9.     "lib": [ "es2015", "dom" ],   
  10.     "noImplicitAny": true,   
  11.     "suppressImplicitAnyIndexErrors": true   
  12.   }   
  13. }   
Add package.json file to your project folder with the below code.

The most important things in your package.json are the name and version fields. Those are actually required, and your package won't install without them. The name and version together form an identifier that is assumed to be completely unique. Changes to the package should come along with changes to the version.

JavaScript
  1. {   
  2.   "name": "angular-quickstart",   
  3.   "version": "1.0.0",   
  4.   "description": "QuickStart package.json from the documentation for visual studio 2017 & WebApi",   
  5.   "scripts": {   
  6.     "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",   
  7.     "lint": "tslint ./app/**/*.ts -t verbose",   
  8.     "lite": "lite-server",   
  9.     "pree2e": "webdriver-manager update",   
  10.     "test": "tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\"",   
  11.     "test-once": "tsc && karma start karma.conf.js --single-run",   
  12.     "tsc": "tsc",   
  13.     "tsc:w": "tsc -w"   
  14.   },   
  15.   "keywords": [],   
  16.   "author": "",   
  17.   "license": "MIT",   
  18.   "dependencies": {   
  19.     "@angular/common": "4.0.2",   
  20.     "@angular/compiler": "4.0.2",   
  21.     "@angular/core": "4.0.2",   
  22.     "@angular/forms": "4.0.2",   
  23.     "@angular/http": "4.0.2",   
  24.     "@angular/platform-browser": "4.0.2",   
  25.     "@angular/platform-browser-dynamic": "4.0.2",   
  26.     "@angular/router": "4.0.2",   
  27.    
  28.     "angular-in-memory-web-api": "~0.2.4",   
  29.     "systemjs": "0.19.40",   
  30.     "core-js": "^2.4.1",   
  31.     "rxjs": "5.0.1",   
  32.     "zone.js": "^0.7.4"   
  33.   },   
  34.   "devDependencies": {   
  35.     "concurrently": "^3.2.0",   
  36.     "lite-server": "^2.2.2",   
  37.     "typescript": "~2.0.10",   
  38.    
  39.     "canonical-path": "0.0.2",   
  40.     "tslint": "^3.15.1",   
  41.     "lodash": "^4.16.4",   
  42.     "jasmine-core": "~2.4.1",   
  43.     "karma": "^1.3.0",   
  44.     "karma-chrome-launcher": "^2.0.0",   
  45.     "karma-cli": "^1.0.1",   
  46.     "karma-jasmine": "^1.0.2",   
  47.     "karma-jasmine-html-reporter": "^0.2.2",   
  48.     "protractor": "~4.0.14",   
  49.     "rimraf": "^2.5.4",   
  50.    
  51.     "@types/node": "^6.0.46",   
  52.     "@types/jasmine": "2.5.36"   
  53.   },   
  54.   "repository": {}   
  55. }   

Create a sub-folder app on the root folder. In this folder, we need to create our TypeScript files:

  1. main.ts
  2. app.module.ts
  3. app.component.ts
  4. app.component.html

We need to create components to the each route we need. In this example, we need to create two components Root1Component and Root2Component that must be declared in app.module.ts.


  1. Create your index.html file, as shown below.
HTML
  1. <!DOCTYPE html>   
  2. <html>   
  3. <head>   
  4.     <script>document.write('<base href="' + document.location + '" />');</script>   
  5.     <title>Angular4 Routing</title>   
  6.     <base href="/">   
  7.     <meta charset="UTF-8">   
  8.     <meta name="viewport" content="width=device-width, initial-scale=1">   
  9.     <base href="/">   
  10.     <link rel="stylesheet" href="styles.css">   
  11.    
  12.     <!-- load bootstrap 3 styles -->   
  13.     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">   
  14.    
  15.    
  16.     <!-- Polyfill(s) for older browsers -->   
  17.     <script src="node_modules/core-js/client/shim.min.js"></script>   
  18.     <script src="node_modules/zone.js/dist/zone.js"></script>   
  19.     <script src="node_modules/systemjs/dist/system.src.js"></script>   
  20.    
  21.     <script src="systemjs.config.js"></script>   
  22.     <script>   
  23.         System.import('app/main.js').catch(function (err) { console.error(err); });   
  24.     </script>   
  25.    
  26. </head>   
  27. <body>   
  28.     <my-app>Loading App</my-app>   
  29. </body>   
  30. </html>   

Angular will launch the app in the browser with our component, and will place it on a specific location in index.html.

STEP 5 - Run the application


Resources

Angular4: https://angular.io/

My personal blog: http://joaoeduardosousa.wordpress.com/

Next Recommended Reading How To Start Angular App In VS 2017