logo

NJP

Angular2 Development Environment

Import · Mar 27, 2017 · article

Whether you are creating your first or 100th angular2 application, environment setup couldn't be easier. Javascript development in 2017 can be a confusing thing. There are enough frontend frameworks alone to make your head spin. Then you have ECMA5, ECMA2016, TypeScript, etc. There are tools like gulp, bower, grunt, npm, systemJS, webpack, and the list goes on.

Luckily, with Angular2, there is an official angular command line tool that will help setup, develop, test, build, and (with a few tweaks) even deploy to our ServiceNow instance. Don't be afraid of the phrase "command line tool", I'll walk you through all of the commands you need to run to achieve our goal. But first, let's setup our development environment. We will need a few things:

  1. NodeJS (and npm)
  2. Angular-cli
  3. git
  4. An editor (My favorite is SublimeText, but if you fancy a free option, then Atom (http://atom.io) comes in a close second).
  5. A browser (if you are reading this, then I assume you already have a browser)

Let's start by making sure we have NodeJS and npm installed. Open up a terminal on your local machine and type node -v if you get a response indicating that the command isn't found or the file doesn't exist, then you should install it otherwise this indicates what version of node you are running. For Mac and Windows users, you can run over to nodejs.org to download the installer. If you have Linux, then I assume you already know how to install it or you are good at using Google which I recommend you put those skills to use. Likewise, run the command npm -v to determine if you have npm installed. If you have Mac of Windows, the installers generally treat this as a packaged deal and you get a 2 for 1 thing.

Note: For the rest of this article I am going to assume you have node 6.10.0 or greater and npm 3.10.10 or greater. If you have old versions, you should probably update (another awesome (not!) side effect of current day javascript development, release cycles are short and rapid causing you to update frequently).

Well now that we have npm and node installed and up to date, we can install our angular-cli tool. This little guy really is magical. He can setup a project, generate different parts of your app (components, interfaces, classes, services, etc), and he will also transpile and bundle (build) our application for us into a few handy little files.

So, open a terminal (or use an open one if you are like me and have 100 open terminals because you forget to close them) and type the command ng -v. Just like with node and npm, if you get a response indicating it can't be found, then you should install it. The installation command is universal across platforms which is npm install -g angular-cli. Yes, some of you linux users will need to issue that command as sudo. And BOOM! Done installing Angular-cli.

Note: I am running version 1.0.0-beta.28.3. Yes, it's still in beta…don't tell me how to live my life!

The last thing we will need to install is git. It's not 100% required, but it is highly recommended. You can get around using git by just downloading the zip files from github and unzipping them. You should just head on over to https://git-scm.com/ to download and install it to your machine.

I'm going to skip how to install a text editor and a browser on your machine. However, I will say, if you have SublimeText or another configurable editor (like Atom) then you should install a package for TypeScript support if it doesn't already support it. Angular2 applications are written in TypeScript, and it sounds far scarier than it really is. TypeScript is like regular javascript (at least what we will use it for), but with some syntactical sugar and type checking in the transpiler.

Ok, we should have all our tools installed and be ready to rock and roll at this point. So, let's get started!

First, clone the repo of our starter application https://github.com/nathangrove/ng2-snow.git with the command git clone https://github.com/nathangrove/ng2-snow.git snow-demo

Then we will want to setup the project and configure the tools. So, issue the command npm install to install all the dependencies. Followed by the command npm run setup to run through the configurator.

Lastly, we fire up the local development server. "Local?" you say? Yes! Local development server, because its fast and allows for automatic builds and reloads when a file is updated. So, to spin up the server issue the command npm run start. This command will start the server and setup the HTTP proxy.

The development server will proxy any requests with the relative url starting with "/api" to the ServiceNow instance provided during setup using BasicAuth with the credentials provided during setup. While you are developing, you should use the HttpClientService to make any http requests. During production, this library will grab the X-UserToken using jelly script and pass it on with the requests as a header.

After development, it is time to deploy. Simply issue the command npm run deploy this command will build the application and push it to the Scoped Application that was built during the setup. The deploy command will upload the files to ServiceNow using the table api. This step can be repeated as many times as necessary. Each deployment will overwrite the previous deployment. Sometimes the browser cache will need to be cleared between deployments, but this is more of a browser setting, so I won't go into detail on that.

That is it. Now you can quickly build top notch Angular2 applications for your ServiceNow instance.

View original source

https://www.servicenow.com/community/developer-articles/angular2-development-environment/ta-p/2314549