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

Joao Sousa
7y
50.7k
0
6

100

Article

ConfigureAngular4withTypeScriptonaWebApplicationwithVS2017.zip

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

{
"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 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

{
"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.
- ts
- module.ts
- component.ts
- component.html
Create your index.html file, as shown below.

HTML

<!DOCTYPE html>
<html>
<head>
<script>document.write('<base href="' + document.location + '" />');</script>
<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">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('app/main.js').catch(function (err) { console.error(err); });
</script>
</head>
<body>
<my-app>Loading App</my-app>
</body>
</html>