Post
Ask Question

Configure Angular 4 With TypeScript On A Web Application With VS 2017

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 shown below.

ASP.NET

Select the template MVC.

ASP.NET

Step 3

Configure Angular 4

We need to prepare our frontend 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 refer to the name and the version fields. These are actually required and your package won't install without them. The name and version together form an identifier, which is assumed to be completely unique. Changes to the package should come along with the 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. On this folder, we need to create our TypeScript files.
    • ts
    • module.ts
    • component.ts
    • component.html
  • 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 place it in a specific location on an index.html.

Step 5

Run the Application

ASP.NET
Resources

Angular4: https://angular.io/


Similar Articles