Hello Angular CLI

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-docker is 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

app works!

Show Comments