package managers

How to create an Angular 2 component library, and how to consume it using SystemJs or Webpack by Aleksey Novik (January 2016)


062 AiA Module Loading and JSPM or WebPack for Angular 2 with K. Scott Allen (October 2015)



From What is the difference between Bower and npm? (stackoverflow, 9.5.2013):

  • npm is most commonly used for managing Node.js modules, but it works for the front-end too when combined with Browserify and/or $ npm dedupe.
  • Bower is created solely for the front-end and is optimized with that in mind.
    • npm does nested dependency tree (This obviously doesn’t work that well on the front-end. Imagine a site having to download three copies of jQuery.)
    • Bower requires a flat dependency tree(puts the burden of dependency resolution on the user).

DefinitelyTyped notes

TypeScript 2.0 and The Future of Declaration Files msdn (June, 2016)

Paraphrased from How to Import Intellisense files into vsCode (Visual Studio Code):

  • The tsd.d.ts file (which is created and updated after running tsd ‘installs’ at the command line) contains references to all of your .tsd files.
  • So, to access all of your project’s tsd files in any of the project’s .ts files, all you need to do is reference the following path at the top of the .ts file /// <reference path="typings/tsd.d.ts" />

angular2 – larger sample apps

Angular2 Webpack Starter (February 2016) An Angular 2 starter kit featuring Angular 2 (Router, Forms, Http, Services, Tests, E2E), Karma, Protractor, Jasmine, Istanbul, TypeScript, Typings, and Webpack by AngularClass.

Papa’s Tutorial: Tour of Heroes (Fall 2015, but updated often with new betas)

Angular 2 developer Guidelines – Tied to ‘Tour of Heroes’



visual studio code notes

Comment from Automatically Compile Your TypeScript Files with Visual Studio Code on OSX:

Alternatively, you can add the “–watch” command to the args array in your tasks.json file. Then, execute the build command (Ctl-Alt-B in Windows by default) to trigger the build task. This causes a build that never ends, but it works just fine!

“command”: “tsc”,
“args”: [ “–watch” ],

If I get the Transpiler warning: Cannot find name ‘xxxx’  and I’m working with angular2, I likely need to run the following:

tsd query <packageName> –action install –save

Example: C:\ATS\todo>tsd query rx-lite –action install –save


Topics in VS Code ‘Editing Tasks’ post:

  • tsconfig.json
  • transpiling
  • tasks,json
  • more…

sample: steps to build “5/8/15 Alex Eagle todo” using (8/18/15) alpha .34

Here is the demo: youtube video. It is based on this ngconf2015demo repo.

  • Create a folder named todo2.
  • If you haven’t done so, use npm to install ‘tsd’, the TypeScript Definition manager for DefinitelyTyped.
  • Get the angular2 type definitions – We will use tsd to create the tsd.json file (which can be checked into repo and used by team).
    • Go to the commandline in todo2 and enter: tsd init. This will create the following files: tsd.json, typings\tsd.d.ts.
    • Then enter tsd install angular2 –save (does same thing as  query angular2 –save  –action install) This will update the tsd.json file with a reference to a specific commit/version of the angular2 AND create a typings\angular2\angular2.d.ts file that contains the method signatures/type definitions for type-checking by the editor.
    • Also, as of alpha.34, Angular2 depends transitively on these libraries. If you don’t have them installed, run
      tsd query es6-promise rx rx-lite –action install –save

      • <reference path=”../es6-promise/es6-promise.d.ts”/>
      • <reference path=”../rx/rx.d.ts”/> As of 8.28.15 running ‘tsd install angular2 –save’ took car eof this automatically!
  • Configure the TypeScript compiler (tsc) by using a tsconfig.json file to spell out the various compiler (transpiler) options. See my tsconfig.json notes for details.
  • Create a todo.ts file.
  • Start tsc in watch mode from the command line: tsc -w and leave the command prompt open in the background so that it will produce the todo.js file based on changes we make to the todo.ts file.
  • At the top of the todo.ts file, reference the typings we’ve downloaded. For this project, that would be angular2 – which we installed using the tsd command tsd query angular2 –action install –save.
  • Below our reference(s), add import statements such as this one:
    • import {bootstrap, Component, View, For} from “angular2/angular2”;
    • The app uses firebase which is not released, so we ‘copy it over’. See demo video.
    • Create a firebase import statement and a dependency injection import statement.
  • Create todoApp class with the needed @Component and @View annotations.
  • Below the class definition, add a call to the angular2 boostrap function to tell angular2 about our class:
    • bootstrap(TodoApp);
  • Create the index.html and todo.html files. todo.html is our template file.
  • Start up the http-server to see that the app loads.
  • Fill in more component logic by configuring the dependency injection.
    • Add an ‘injectibles‘ section to the @Component annotation.
    • Create constructor on class and other logic in class. NOTE that the code is plain old JavaScript, not TypeScript.
  • Declare any directives we need to use inside our template. For this app, we type the following inside of our @View annotation:
    • directives [For];

npm notes

  • John Papa’s Tips for Running Node and NPM on Windows
  • package.json – Specifics of npm’s package.json handling
  • From npm wiki entry :
    “As of Node.js version 0.6.3, npm is bundled and installed automatically with the environment.[2] npm runs through the command line and manages dependencies for an application. It also allows users to install Node.js applications that are available on the npm registry.”
  • By default, npm modules are retrieved over the Internet from the public package registry maintained on Modules may be installed through npm install:
             npm install [modileName]
  • From stackoverflow – To see what is installed use:
    npm list (for packages local to directory)
    npm list -g (global)