How to: Setup your development environment for lightweight Angular with TypeScript coding (updated for JSOM coding)

Editors

You will need to install an IDE to work in. You can choose whichever works for you, but the following has been tested:

1. VS Code from https://code.visualstudio.com/
2. Atom from https://atom.io/ (notice that the TSD file for angular is incomplete, so it’s advisable to stick with VScode – but atom has been used and seems to work fine as well)

Packages and References

a. For coding with VSCode, install the following:

1. Node.js from https://nodejs.org/en/download/ to get the npm (nodejs package manager)
2. TypeScript from the console. After you’ve installed NodeJS, open a command prompt and type in (for global installation):

npm install typescript -g

3. TypeScript Definition File for Angular from the console. With the above two installed, once you start coding, you will notice that the angular module is not recognised in VScode. The reason for that is that you need to install a typescript definition file for angular. Open a command prompt at the root folder of your application (this is important!) and run:

tsd install angular --resolve --save

4. Http-Server from the console. Open a command prompt at the root folder of your application (this is important!) and run the following to install the zero-configuration http-server globally (the reason for opening the command prompt at the root folder of your application is because, once it has been installed, you will need to run it at that level):

tsd install http-server -g
 http-server

Notice that once you execute “http-server”, the windows firewall may alert you for the application and require you to allow it access. That’s normal. Also, note that the http server only runs while the console window is open. If you close it, you will have to execute the http-server again, in that application’s folder.

5. If you’re going to be using the JSOM object to work with SharePoint, you need to reference the SP js files. Look further below to find out which files need to be referenced and where to find them.
6. To use the SharePoint js files with TypeScript, you need to add the typings for SharePoint to your project. To do that:

tsd install sharepoint --resolve --save

 b. For coding with Atom.io, install the following:

1. Atom.io comes with its own package manager, so you will not need to install NodeJS to get npm. You will be using apm instead.
2. Atom-TypeScript from the console. Open a command prompt and type in:

apm install atom-typescript

3. Atom-TypeScript Definition File for Angular from the console. Notice that the atom-typescript definition file for Angular is based on the typescript definition for Angular, i.e. you need to first install the TypeScript Definition File for Angular, and then install the Atom-TypeScript Definition File for Angular. Open a command prompt at the root folder of your application (this is important!) and run the following two commands:

tsd install angular --resolve --save
 apm install atom-tsd

4. Http-Server from the console. Open a command prompt at the root folder of your application (this is important!) and run the following to install the zero-configuration http-server globally (the reason for opening the command prompt at the root folder of your application is because, once it has been installed, you will need to run it at that level):

tsd install http-server -g
 http-server

Notice that once you execute “http-server”, the windows firewall may alert you for the application and require you to allow it access. That’s normal. Also, note that the http server only runs while the console window is open. If you close it, you will have to execute the http-server again, in that application’s folder.

5. If you’re going to be using the JSOM object to work with SharePoint, you need to reference the SP js files. Look further below to find out which files need to be referenced and where to find them.
6. To use the SharePoint js files with TypeScript, you need to add the typings for SharePoint to your project. To do that:

tsd install sharepoint --resolve --save

For JSOM Development

from <https://msdn.microsoft.com/en-us/library/office/hh372944(v=office.14).aspx>

If the master page is the standard SharePoint Foundation master page, it already contains references to the required JSOM scripts; if a custom master page is used then you must add the relevant JSOM references before the pages and controls can use the JSOM. SharePoint then identifies the files that need to be sent to the client from the {SharePointRoot}\TEMPLATE\LAYOUTS directory and returns a response that downloads all the files to the host computer (C:\Program Files\Common Files\microsoft shared\Web Server Extensions\15\TEMPLATE\LAYOUTS).

SP.js
SP.Core.js
SP.Runtime.js