A colleague of mine told me to give Angular CLI a try...so here we go. What is Angular CLI?
A command line interface for Angular
Surprise. Surprise.
Since we don't want to get our host infected during this experiment we start in a fresh Docker sandbox.
Grab the Node.js Docker image node and
run it with port 4200 published to the host (The development server will use this port).
$ docker run -it --rm --publish 4200:4200 --hostname hello-world-docker node:7.9.0-alpine /bin/sh
Once we are inside the container we basically follow the instructions on the Angular CLI page:
Installing Angular CLI
/ # npm install -g @angular/cli
....
npm info ok
Create a new Angular app hello-world
/ # ng new hello-world
installing ng
create .editorconfig
create README.md
....
create tslint.json
Installing packages for tooling via npm.
Installed packages for tooling via npm.
You can `ng set --global packageManager=yarn`.
Project 'hello-world' successfully created.
Change into the newly created directory
/ # cd hello-world
and start the development Server internally with host hello-world-docker.
Note:
--host hello-world-dockeris needed to access the app from outside the container.
/hello-world # ng serve --host hello-world-docker
** NG Live Development Server is running on http://hello-world-docker:4200 **
Hash: 863dad538e4cd34a1928
Time: 7197ms
chunk {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 158 kB {4} [initial] [rendered]
chunk {1} main.bundle.js, main.bundle.js.map (main) 3.62 kB {3} [initial] [rendered]
chunk {2} styles.bundle.js, styles.bundle.js.map (styles) 9.77 kB {4} [initial] [rendered]
chunk {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.37 MB [initial] [rendered]
chunk {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]
webpack: Compiled successfully.
From the host you should be able to access the app here: http://localhost:4200