Finally... Package.json.js

I know I have been promising to finish looking at the default files created Angular CLI for over a week now and finally we get there.

Granted this isn't the most exciting subject but when we start coding in the next post, you will need to know about these files. So let's take a look at the package.json.js file.

The file itself breaks down into three sections; Settings, Dependencies and DevDependencies. Let's do a quick review of each section.

Settings



There are a couple things you want to look at in the Settings section. First are the name, version and author properties. These are pretty obvious but I still wanted to draw your attention to them since a lot of folks leave them at the default. Take a few moments and update these.

Next lets look at the start property, by default it is set to "ng serve" but if you want to run your Angular 2 app locally, you will need to change this.

Angular has no concept of localhost so you need to modify this to add a host  (for localhost 0.0.0.0) and a port (you can choose any open port, I chose 8080). This is a simple thing but it can trip you up.


Dependencies



For the most part, this references the versions of the core Angular components installed, things like http, forms, browser, etc.  There are four additional javascript libraries also referenced; core-js, rxjs (Reactive Extensions, not to be confused with ReactJS), zone.js (which gives us and execution context or zone across async tasks) and bootstrap (Twitter's spiffy UI layout library).

If you upgrade any of these, you will need to update the version here or it won't be recognized by your app.

DevDependencies



Devdependencies are the additional tool libraries that the Angular CLI loads by default. So you get things like Karma, Jasmine and Protractor for testing and tslint (which checks your TypeScript for readability). If you don't want to use these you can remove them, though I recommend that you keep tslint.

As in the Dependencies section, if you upgrade any of these libraries, be sure to change the version number here.

Ok, that is it, that wasn't too painful. Next time we start coding. We will use the Angular CLI to set up a project and add some components, classes and maybe a service or two. I know you are as excited about that as I am.

Catch you later,
Allen

Comments

Popular posts from this blog

Using the Angular CLI to set up an Angular 2 project