I purused the package.json file and tried to learn a little about the application’s configuration and what modules are being imported.

After the name, description, and version number of the application came a big json block for scripts. These scripts are shortcuts to run various commands for compiling, starting the server, running tests, etc. Something I learned was the ‘concurrently’ command. This allows multiple commands to run concurrently. For example, the ‘start’ command includes concurrently "tsc -w" "lite-server" which starts the server and watches for files that change so they can be recompiled.

The next major block was for dependencies. It included the ‘@angular/' construct to include Angular 2 which is different then running 'npm install angular2 --save' which I've seen everywhere else. Installing angular2 only gets you to beta 17 whereas with @angular/ you can get rc 1. I don't know if you will always have to configure package.json or if there will be a way to 'npm install' the latest angular2 or @angular/. Additional dependencies include systemjs for module loading, es6-shim for JavaScript compatibility, reflect-metadata for adding metadata to a class, rxjs for handling of asynchronous and event-based programming, zone.js for creating context for asynchronous operations, angular2-in-memory-web-api for simulating data, and bootstrap for the front-end framework.

Finally are the devdependencies; the modules used for development. They include the previously mentioned concurrently, lite-server for a lightweight web server, typescript the TypeScript programming language the project uses, typings for managing TypeScript definition, canonical-path for easier multi-platform path management , http-server for a more robust web server, tslint for checking TypeScript syntax, lodash a JavaScript library for arrays, strings, etc., jasmine-core for BDD, karma for getting tests to run in the browser, karma-chrome-launcher for helping karma launch the Chrome browser, karma-cli to allow Karma to be used from the command line, karma-htmlfile-reporter adds a Karma plugin that exports test results as a styled HTML file, karma-jasmine an Karma plugin that enables it to run Jasmine tests , protractor for end-to-end testing, and rimraf for easily deleting directories.

I think going through that was worthwhile. Typically, I would have just copied the package.json from somewhere and just used it until I ran into a problem. Taking a more thorough approach is something I want to do right now and it gives me a sense that I’m making steady progress.

Reading the README.

I spent time today reading through the README file and setting up a GitHub project based on the Angular QuickStart. I didn’t do any modifications yet, just checked-in the base project. I also ran through the unit and end-to-end (e2e) tests. I didn’t know what Protractor was until I saw the config file and read that it was the e2e test framework. Guess I’ll have to add that to the list of config files I need to dig through and understand.

My plan for the next couple days is to read through and understand the package.json, tsconfig.json, and systemjs.config.js. After those three, I’ll decide which to tackle next, but I still plan to have a decent grasp of all the configurations before moving on to actually writing some tests.

Getting started is a bigger chore than I thought it’d be.

Holy cow, the last 3+ hours have just been trying to get testing working under Angular. I kept hitting something where calling ‘require()’ would kill the test. I looked at tons of examples and everyone was handling the setup differently. Then I noticed that some package.json files were including ‘@angular/core’:2.0.0-rc.1 and some used ‘angular2’:2.0.0-beta.13. I played around with version and going from beta.15 to beta.16 would break the project and ‘angular2’ didn’t even have an rc version. I should have better prepared myself for this prerelease framework mayhem.

I tried grabbing projects from github and the npm install would fail or some other problems would pop up. I finally found the Angular QuickStart project which from the Angular team. I was skeptical that it would work as so much of the documentation and non-core resources are in disarray, but I downloaded it and was able to run trough the build and test phases which is better than any other project that included tests.

The read me states that while it is a starting point, it is not designed for production. I hope to learn where it isn’t suitable for production, but as of now it is certainly the best jumping off point for me. For the next development sessions and posts, I’m going to explore the layout of the QuickStart project and play with the tests to make sure I have a reasonable understanding of what is going on so I have a better chance fixing things when they inevitably break.

I spent an hour+ trying to get a Jasmine test for an Angular 2 component. I didn’t have a problem writing a generic Jasmine test, but when I tried to import an Angular component the Jasmine test would stop running. I think there’s something going on with the configuration. I’m going to try to find another tutorial. The book and post I’ve been using don’t have a complete setup. I really prefer to have a working example and figure out what the configuration values mean, but I might have to figure out the configuration so I can get things running. This case of learning involves a lot of failing.

Made another small but important step in the project. I created the package.json file and added dependencies for angular2 for Angular 2 development and jasmine-core, live-server, and concurrently for Jasmine testing. I also created a tsconfig.json and cribbed most of its contents from an example to get TypeScript compiling in the project. As part of the Jasmine installation the typings.json file was created which contains additional Jasmine information.

Lastly, I created app.ts for my app component and app.spec.ts for the app component tests. Both of these files were empty, but they are getting compiled when I run the ‘tsc’ command. I think I’m on the verge of writing my first test.