Angular 2 Keep Notes

Synopsis

Capture what's on your mind. Add notes, list, photos and audio.

Motivation

To learn about development with NodeJS & Angular 2 using TypeScript

Prerequisites

Node.js and npm are essential to Angular 2 development.

Get it now if it's not already installed on your machine.

Verify that you are running at least node v4.x.x and npm 3.x.x by running node -v and npm -v in a terminal/console window. Older versions produce errors.

We recommend nvm for managing multiple versions of node and npm.

Installation

• Install TypeScript Compiler CLI utility.

npm install -g typescript

• Install Typings CLI utility.

npm install -g typings

Install npm packages

See npm and nvm version notes above

Install the npm packages described in the package.json and verify that it works:

Attention Windows Developers: You must run all of these commands in administrator mode.

npm install
npm start

If the typings folder doesn't show up after npm install please install them manually with:

npm run typings -- install

The npm start command first compiles the application, then simultaneously re-compiles and runs the lite-server. Both the compiler and the server watch for file changes.

Shut it down manually with Ctrl-C.

You're ready to write your application.

npm scripts

We've captured many of the most useful commands in npm scripts defined in the package.json:

• npm start - runs the compiler and a server at the same time, both in "watch mode".
• npm run tsc - runs the TypeScript compiler once.
• npm run tsc:w - runs the TypeScript compiler in watch mode; the process keeps running, awaiting changes to TypeScript files and re-compiling when it sees them.
• npm run lite - runs the lite-server, a light-weight, static file server, written and maintained by John Papa and Christopher Martin with excellent support for Angular apps that use routing.
• npm run typings - runs the typings tool.
• npm run postinstall - called by npm automatically after it successfully completes package installation. This script installs the TypeScript definition files this app requires. Here are the test related scripts:
• npm test - compiles, runs and watches the karma unit tests
• npm run e2e - run protractor e2e tests, written in JavaScript (*e2e-spec.js)

Testing

The QuickStart documentation doesn't discuss testing. This repo adds both karma/jasmine unit test and protractor end-to-end testing support.

Unit Tests

TypeScript unit-tests are usually in the app folder. Their filenames must end in .spec.

Look for the example app/root/app-root.component.spec.ts. Add more .spec.ts files as you wish; we configured karma to find them.

Run it with npm test

That command first compiles the application, then simultaneously re-compiles and runs the karma test-runner. Both the compiler and the karma watch for (different) file changes.

Shut it down manually with Ctrl-C.

Test-runner output appears in the terminal window. We can update our app and our tests in real-time, keeping a weather eye on the console for broken tests. Karma is occasionally confused and it is often necessary to shut down its browser or even shut the command down (Ctrl-C) and restart it. No worries; it's pretty quick.

The HTML-Reporter is also wired in. That produces a prettier output; look for it in ~_test-output/tests.html.

End-to-end (E2E) Tests

E2E tests are in the e2e directory, side by side with the app folder. Their filenames must end in .e2e-spec.ts.

Look for the example e2e/app.e2e-spec.ts. Add more .e2e-spec.js files as you wish (although one usually suffices for small projects); we configured protractor to find them.

Thereafter, run them with npm run e2e.

That command first compiles, then simultaneously starts the Http-Server at localhost:8080 and launches protractor.

The pass/fail test results appear at the bottom of the terminal window. A custom reporter (see protractor.config.js) generates a ./_test-output/protractor-results.txt file which is easier to read; this file is excluded from source control.

Shut it down manually with Ctrl-C.