Total Pageviews

20 Feb 2017

AngularJs + TypeScript with SharePoint


Getting intellisense in Visual Studio Code for AngularJs in TypeScript is not as straightforward as one would expect. Follow these steps below to get it working
image
Open Visual Studio Code
Press CTRL+` and run these commands:
tsc –init
npm install typings –global
typings install dt~jquery --global --save
image
typings install dt~angular
image
Now, if you run tsc compiler, your will get errors like so:
image
in order to fix it:
- create a global.d.ts file inside typings folder. It will be a new entry point for your TypeScript
- add import * as angular from "angular" as a first line
- add /// <reference path="index.d.ts" /> following that:
image
Modify tsconfig.json include "files" property to reference the new global.d.ts file: :
{
    "compilerOptions": {
        "target": "es5",
        "sourceMap": true
    },

    "files": [
    "typings/global.d.ts"
  ]
}
image

Let TypeScript compiler know which folder contains your .ts code by adding “include” property to the tsconfig.json file:
"include": ["src/*"]
where src/ is your source code folder image Run TypeScript compiler and start watching the files:
tsc --watch
image
Now you get angular and jQuery intellisense in TypeScript:
image
Well. it’s not really SharePoint specific, but it’s nice to know SharePoint developers can use the same steps.
If you are searching for a quick start with SharePoint and modern tools have a look at these articles by Andrew Koltyakov.

1 comment:

  1. This comment has been removed by a blog administrator.

    ReplyDelete