Angular 2 documentation includes a "Getting Started" chapter in TypeScript
The instructions are good but not aimed at the Visual Studio 2015 developer.
Here is a repo that ports the sample (with extra 2-way binding!) to the Visual Studio 2015 world.
Confession: I took an existing Getting Started project and jammed it into VS which isn't the best way to proceed.
-
CREATE a Visual Studio solution name "angular2-getting-started"
-
DELETE the generated
index.html
, andapp
stuff. -
IGNORE the
src
level in the instructions; just put everything in the project root- node_modules
- typings
- index.html
- package.json
- tsconfig.json (more on that in a moment)
-
DO install the npm packages from the command line.
DO NOT include node_modules in your project or you will be very sorry.
-
COPY
node_modules/traceur/bin/traceur-runtime.js
to another location.IIS refuses to serve anything from a directory named
bin
which means you'll get a 404 later if you try to reference this. I put my copy innode_modules/traceur/traceur-runtime.js
. -
UPDATE the traceur script source in
index.html
to match the copy location. -
EXPECT VS to ignore
tsconfig.json
. It uses settings in the.csproj
-
OPEN the properties of the project (Alt Enter) a. pick "Module System | commonJS" b. check "Generate source maps" c. check (leave checked) "Compile on save". This is nice!
-
EDIT the
.csproj
file in a text editor !!!Two critical settings are not exposed in Visual Studio. Add them by hand next to the similarly named settings.
<TypeScriptEmitDecoratorMetadata>True</TypeScriptEmitDecoratorMetadata> <TypeScriptExperimentalDecorators>True</TypeScriptExperimentalDecorators>
-
RUN it (without debugging) by pressing Ctrl-F5