Step 1

Make sure you have installed the prerequisites

Without these prerequisites, the Application will not run.

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.

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",
  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",
  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",
  51. "@types/node": "^6.0.46",
  52. "@types/jasmine": "2.5.36"
  53. },
  54. "repository": {}
  55. }

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">
  12. <!-- load bootstrap 3 styles -->
  13. <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  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>
  21. <script src="systemjs.config.js"></script>
  22. <script>
  23. System.import('app/main.js').catch(function (err) { console.error(err); });
  24. </script>
  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/