Angular2 : Creating an ASP.Net MVC and Angular2 hybrid application – Part 2

  1. Open Visual Studio -> Create an ASP.Net MVC project.

Choose No Authentication.

2.  Create package.json file in the project root.
Create a package.json file and add below contents.

3. Add systemjs.config.js file to the project root and add below lines.

4) Create ‘tsconfig.json’ file in the project root and add below contents.

5) Create a new folder ‘app’ in the project root and create below files in it.

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

Content of app.component.ts

Content of app.module.ts

Content of main.ts

If you are getting  below confirmation dialog click on No.

6) Go to Views -> Shared -> _Layout.chtml and insert below code after  @Scripts.Render(“~/bundles/modernizr”).

7) Go to Views -> Home -> Index.chtml and replace the code with below lines.

8. Right click on package.json and click on Restore Packages.

9) Now all set to run the application. Build and run the application and you should see below page if all goes well.

Download Source code from Github

Leave a Reply

Your email address will not be published. Required fields are marked *