Configure Angular4 with TypeScript on a WebApplication with VS 2017

This article will show how to configure Angular 4 and TypeScript in a ASP.Net MVC web application using Visual Studio 2017

STEP 1 – Make sure you have installed the prerequisites

Without these requisites, 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 StudioFile New Project menu, expand the Web category, and pick ASP.NET Web Application like on the image below

Select the template MVC:

 

STEP 3 – Configure Angular 4

We need now to prepare our frontend to run Angular 4

  • Create tsconfig.json which is the TypeScript compiler configuration file.
JavaScript
{ 
  "compilerOptions"{ 
    "target""es5", 
    "module""commonjs", 
    "moduleResolution""node", 
    "sourceMap": true, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "lib": [ "es2015""dom" ], 
    "noImplicitAny": true, 
    "suppressImplicitAnyIndexErrors": true 
  } 
} 
  • 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
{ 
  "name""angular-quickstart", 
  "version""1.0.0", 
  "description""QuickStart package.json from the documentation for visual studio 2017 & WebApi", 
  "scripts"{ 
    "start""tsc && concurrently \"tsc -w\" \"lite-server\" ", 
    "lint""tslint ./app/**/*.ts -t verbose", 
    "lite""lite-server", 
    "pree2e""webdriver-manager update", 
    "test""tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\"", 
    "test-once""tsc && karma start karma.conf.js --single-run", 
    "tsc""tsc", 
    "tsc:w""tsc -w" 
  }, 
  "keywords": [], 
  "author""", 
  "license""MIT", 
  "dependencies"{ 
    "@angular/common""4.0.2", 
    "@angular/compiler""4.0.2", 
    "@angular/core""4.0.2", 
    "@angular/forms""4.0.2", 
    "@angular/http""4.0.2", 
    "@angular/platform-browser""4.0.2", 
    "@angular/platform-browser-dynamic""4.0.2", 
    "@angular/router""4.0.2", 
 
    "angular-in-memory-web-api""~0.2.4", 
    "systemjs""0.19.40", 
    "core-js""^2.4.1", 
    "rxjs""5.0.1", 
    "zone.js""^0.7.4" 
  }, 
  "devDependencies"{ 
    "concurrently""^3.2.0", 
    "lite-server""^2.2.2", 
    "typescript""~2.0.10", 
 
    "canonical-path""0.0.2", 
    "tslint""^3.15.1", 
    "lodash""^4.16.4", 
    "jasmine-core""~2.4.1", 
    "karma""^1.3.0", 
    "karma-chrome-launcher""^2.0.0", 
    "karma-cli""^1.0.1", 
    "karma-jasmine""^1.0.2", 
    "karma-jasmine-html-reporter""^0.2.2", 
    "protractor""~4.0.14", 
    "rimraf""^2.5.4", 
 
    "@types/node""^6.0.46", 
    "@types/jasmine""2.5.36" 
  }, 
  "repository"{} 
} 

 

  • Create a sub-folder app on the root folder. On this folder we need to create our typescript files:
    • main.ts
    • app.module.ts
    • app.component.ts
    • app.component.html
  • Create your index.html file like showing below:

 

HTML
<!DOCTYPE html> 
<html<head    >document.write(' href="' + document.location + '" />'); 
    <title>Angular4 Routing</title> 
    <base href="/"    <meta charset="UTF-8"    <meta name="viewport" content="width=device-width, initial-scale=1"    <base href="/"    <link rel="stylesheet" href="styles.css" 
    <!-- load bootstrap 3 styles --> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" 
 
    <!-- Polyfill(s) for older browsers --> 
     src="node_modules/core-js/client/shim.min.js"> 
     src="node_modules/zone.js/dist/zone.js"> 
     src="node_modules/systemjs/dist/system.src.js"> 
 
     src="systemjs.config.js"> 
            System.import('app/main.js').catch(function (err) { console.error(err); }); 
     
 
</head> 
<body    <my-app>Loading App</my-app> 
</body> 
</html> 
Angular will launch the app in the browser with our component and places it in a specific location on index.html.

 

STEP 5 – Run application

Resources

Angular4: https://angular.io/

Advertisements

About João Sousa
Senior Software Engineer in .Net (Microsoft Certified MTCS and MCPD). .NET Microsoft MVP 2015

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: