asp.net-core Quick tutorial for an Angular 2 Hello World! App with .Net Core in Visual Studio 2015


Example

Steps:

  1. Create Empty .Net Core Web App: enter image description here

  2. Go to wwwroot, and create a normal html page called Index.html: enter image description here

  3. Configure Startup.cs to accept static files (this will require to add "Microsoft.AspNetCore.StaticFiles": "1.0.0" library in the “project.json” file): enter image description here enter image description here

  4. Add NPN File:

    • Right click the WebUi project and add NPN Configuration File (package.json): enter image description here

    • Verify the last versions of the packages: enter image description here

      Note: If visual studio does not detect the versions of the packages (Check all packages, because some of them does show the version, and some others don't), it might be because the Node version coming in visual studio is not working correctly, so it will probably require to install node js externally and then link that installation with visual studio.

      i. Download and install node js: https://nodejs.org/es/download/

      ii. Link the installation with visual studio: https://ryanhayes.net/synchronize-node-js-install-version-with-visual-studio-2015/: enter image description here iii. (Optional) after saving the package.json it will install the dependencies in the project, if not, run "npm install" using a command prompt from the same location as the package.json file.

      Note: Recommended to install "Open Command Line", an extension that can be added to Visual Studio: enter image description here

  5. Add typescript:

    • Create a TsScript folder inside the WebUi project, just for organization (The TypeScripts won't go to the browser, they will be transpiled into a normal JS file, and this JS file will be the one going to the wwwroot foder using gulp, this will be explained later): enter image description here

    • Inside that folder add "TypeScript JSON Configuration File" (tsconfig.json): enter image description here And add the next code:

      enter image description here

    • In the WebUi Project’s root, add a new file called typings.json: enter image description here And add the next code: enter image description here

    • In the Web Project root open a command line and execute "typings install", this will create a typings folder (This requires “Open Command Line” explained as an optional step in the Note inside Step 4, numeral iii). enter image description here enter image description here enter image description here

  6. Add gulp to move files:

    • Add "Gulp Configuration File" (gulpfile.js) at the root of the web project: enter image description here
    • Add Code: enter image description here
  7. Add Angular 2 bootstrapping files inside the “tsScripts” folder: enter image description here

    app.component.ts enter image description here

    app.module.ts enter image description here

    main.ts enter image description here

  8. Inside wwwroot, create the next file structure: enter image description here

  9. Inside the scripts folder (but outside app), add the systemjs.config.js: enter image description here And add the next code: enter image description here

  10. Execute Gulp Task to generate the scripts in wwwroot.

    • Right click gulpfile.js
    • Task Runner Explorer enter image description here i. If the tasks are not loaded ("Fail to load. See Output window") Go to output window and take a look at the errors, most of the time are syntax errors in the gulp file.
    • Right Click "default" task and "Run" (It will take a while, and the confirmation messages are not very precise, it shows it finished but the process is still running, keep that in mind): enter image description here
  11. Modify Index.html like: enter image description here

  12. Now run and enjoy.

    Notes:

    • In case there are compilation errors with typescript, for example "TypeScript Virtual Project", it is an indicator that the TypeScript version for Visual Studio is not updated according to the version we selected in the “package.json”, if this happens please install: https://www.microsoft.com/en-us/download/details.aspx?id=48593

References: