ng2 Green Fields

I'm trying angular2 for a project at work. These are the install notes.

This is put it all in a docker container.

This is ultimatley a bad idea because the file watch didn't really work for me from the container through to my windows host.

If you know a better way I'd love to hear it since I really hate having to installing node on my presonal laptop just to do some work dev.

TEST :: Using angular-cli for building the project.

This is the recommended angular opinionated method of using angular 2.

But this is currently in beta so wrap it with npm so:

alternative methods don't affect how the devs call start/test commands

http://blog.angular-university.io/how-to-run-angular-2-in-production-today/

Project creation.

I'm basicall fresh to ng2 but know ng 1. Things to know straight up:

We are a windows shop.
I'm new to Angular2 but have work with ng1 for the past 3/4 years.
This is a green fields project.
Issue can be nested.
I'm setting this up in a docker container. That will probably change once testing begins.

Task 1. Build a site.

[Command] Serve

/ng2/bca-site# ng serve --port 8080 --live-reload-port 35729 # These port have been set up

Create a project

ng new ng2-site

Issue :: You cannot use the new command inside an angular-cli project

Solution: Can't have a package.json in the directory this is called in.

Issue

Fails on windows when trying to serve with ng serve

Possible solution

[no-bin-links] Run with npm install with --no-bin-links

Issue

ng serve failes still

Possible solution

[npm-reinstall] Remove the node_modules directory. and reinstall packages with npm install --no-bin-links.

Issue

npm install give Maximum call stack size exceeded

Possible solution: Fresh packes npm cache clear; npm install --no-bin-links

Issue

ng serve fails with

Error: EPROTO: protocol error, symlink '/root/ng2/bca-site/src' -> '/root/ng2/bca-site/tmp/funnel-input_base_path-5cUJ5fhG.tmp/0

Possible sollution

[AdminConsole] Run in admin console. https://github.com/angular/angular-cli/issues/886

Issue

ng serve gives cannot run in wd

Possible solution

[unsafe-perms] Run npm install with --unsafe-perm https://stackoverflow.com/questions/18136746/npm-install-failed-with-cannot-run-in-wd

Issue

npm ERR! Linux 4.1.19-boot2docker give Maximum call stack size exceeded

PossibleSolution

[ManualPackages] Install Last package by hand with npm install typings@0.8.1

Issue

typings: not found

Failed solutions

PossibleSolution
alias typings=/root/ng2/bca-site/node_modules/typings/bin/typings

PossibleSolution
install typing with bin-links
[GlobalTypings] Install typings globally npm install typings@0.8.1 -g

Success new site - Command Summary

!AdminConsole!
npm install -g angular-cli typings@0.8.1
ng new site <site-name>; cd <site-name>
npm install --no-bin-links --unsafe-perms

Your developer setup - Command Summary

npm install --no-bin-links --unsafe-perms

Testing

Below is a complete setup to get testing running using the default angular-cli project. It include creation of a docker container.

Complete angular-cli project docker machine setup

The machine must be created as administrator because the build & serve commands must be run in admin and the docker-machine-vm will only be accessible to the admin user.

Do not forward 9876 because these are run on windows for avoid installing chrome inside the container.

docker-machine create --driver "virtualbox" "default"  #
docker-machine env --shell powershell | Invoke-Expression;
VBoxManage controlvm "default" natpf1 "tcp-port4200-4200,tcp,,4200,,4200";
VBoxManage controlvm "default" natpf1 "tcp-port35729-35729,tcp,,35729,,35729";
docker-machine ssh

docker run -it -p 4200:4200 -p 35729:35729 --name nodebox -v /c/Users/simon/projects/ng2:/root/ng2 node /bin/bash

npm install -g angular-cli typings@0.8.1 protractor;
cd /root/ng2/bca-site;
npm install --no-bin-links --unsafe-perms;
ng serve --port 4200 --live-reload-port 35729;

ng test --build=false;