Notes on using this project with the Angular tutorial
To follow this tutorial you must have
npm installed, working, and in your PATH. You can find out how to do this nearly anywhere. Knowing TypeScript is not necessary, as the tutorial has some basic explanations, but I highly recommend further study of TypeScript. You should also have a rudimentary knowledge of how to use
You can use
- The Nuget Package Manager Console.
- The old fashioned Windows Command Prompt.
But you must ensure that the active directory for any of these consoles is the root directory of the project.
I prefer PowerShell outside of Visual Studio, as it seems more stable than the NuGet console at staying in the directory you want.
Following the Tutorial
- The tutorial starts with Step 1, where you create four basic files that most Angular 2 TypeScript applications need. These are
systemjs.config.js. These files are already included in this project. Skip the instructions with
npm run, as I have already taken care of this, but do read about what these files do.
- Steps 2 to 4 tell you to create a folder called
appin the root of your project, and create three TypeScript files in that folder, being
main.ts. This root
appfolder and these three files already exist in this project. Read these sections of the tutorial carefully to get a good understanding of what these files do, and some TypeScript fundamentals.
- NB Don't confuse this
appfolder in the project root with the
appfolder inside the
appfolder. You can delete these and they will magically reappear when you build the project again.
- Step 5 details adding the app's default page,
index.html, and a very basic stylesheet,
styles.css. These are also already included in the project, but, again, read the tutorial carefully even for these basic steps.
- You should not follow Step 6 to start the application, but it might work even in the .NET project.
Making it Work
I did the following:
typings.jsonwith one that worked, that I found somewhere I don't recall. The one from the tutorial was causing compile errors for TypeScript files.
- Created the folder
stylings.css. Very often this folder is created by Gulp when it copies CSS files, or e.g. gets LESS files compiled into CSS.
- Added the
- Updated the paths for script references
index.htmlto use files inside
typings.jsonwith those now in project to get
tsc, the TypeScript compiler, working properly.
ASP.NET Core will, by default, not serve any static files at all, from any folder in the web site. To get it to serve static files from its default
wwwroot folder, I had to add the line
"Microsoft.AspNetCore.StaticFiles": "1.0.0" to the
dependencies node of
project.json, and then:
- Delete the little Hello world thing and add all code now in
node_modules folder, to the following folders:
To get Gulp to work, I had to add the following npm packages:
- "del": "^2.2.2"
- "gulp": "^3.9.1"
- "gulp-delete-file": "^1.0.2"
- "r.js": "^1.0.3"
- "requirejs": "^2.3.2"
web.config file created by the project template includes a tag named
aspNetCore. The compiler doesn't recognise this because it isn't in the oudated schema for
web.config that VS still uses. I created a new schema based on the project's
web.config, which then includes
You will have to add the
web.xsd file to the schemas for
web.config in your Visual Studio. Do so by
web.configas if for editing.
- Right click anywhere in the editor pane, then click on "Properties" at the bottom of the context menu.
- Add the string
web.xsdto the list of XML schemas that appears when you click the
I will be forking this project to extend it by following Angular's next tutorial, Tour of Heroes, and blogging about how that all works.
You can use this project as is to experiment with Angular 2 and TypeScript, if you just stick to the following guidelines for now:
- Keep all your TypeScript work in the
appfolder in the root of the project, not
wwwroot/app. If you place it there, it could well be deleted when you build.
wwwroot/jsfolder, or a sub-folder, and reference it from there.
These are not commandments, and if you feel like experimenting with other areas of the project, go ahead. Just always branch before you do, or, if you're a sinner and not using source control, at least make a backup. At worst you can clone this repo again and start from scratch.