JavaScript - Angular - Create Hello World Project

To create our first angular project. Type the following at the command prompt:

$ ng new my-angular-hello-world
CREATE my-angular-hello-world/README.md (1036 bytes)
CREATE my-angular-hello-world/angular.json (3692 bytes)
CREATE my-angular-hello-world/package.json (1328 bytes)
CREATE my-angular-hello-world/tsconfig.json (408 bytes)
CREATE my-angular-hello-world/tslint.json (2837 bytes)
CREATE my-angular-hello-world/.editorconfig (245 bytes)
CREATE my-angular-hello-world/.gitignore (503 bytes)
CREATE my-angular-hello-world/src/favicon.ico (5430 bytes)
CREATE my-angular-hello-world/src/index.html (306 bytes)
CREATE my-angular-hello-world/src/main.ts (373 bytes)
CREATE my-angular-hello-world/src/polyfills.ts (3194 bytes)
CREATE my-angular-hello-world/src/test.ts (642 bytes)
CREATE my-angular-hello-world/src/styles.css (80 bytes)
CREATE my-angular-hello-world/src/browserslist (388 bytes)
CREATE my-angular-hello-world/src/karma.conf.js (964 bytes)
CREATE my-angular-hello-world/src/tsconfig.app.json (166 bytes)
CREATE my-angular-hello-world/src/tsconfig.spec.json (256 bytes)
CREATE my-angular-hello-world/src/tslint.json (314 bytes)
CREATE my-angular-hello-world/src/assets/.gitkeep (0 bytes)
CREATE my-angular-hello-world/src/environments/environment.prod.ts (51 bytes)
CREATE my-angular-hello-world/src/environments/environment.ts (662 bytes)
CREATE my-angular-hello-world/src/app/app.module.ts (314 bytes)
CREATE my-angular-hello-world/src/app/app.component.css (0 bytes)
CREATE my-angular-hello-world/src/app/app.component.html (1141 bytes)
CREATE my-angular-hello-world/src/app/app.component.spec.ts (1043 bytes)
CREATE my-angular-hello-world/src/app/app.component.ts (226 bytes)
CREATE my-angular-hello-world/e2e/protractor.conf.js (752 bytes)
CREATE my-angular-hello-world/e2e/tsconfig.e2e.json (213 bytes)
CREATE my-angular-hello-world/e2e/src/app.e2e-spec.ts (318 bytes)
CREATE my-angular-hello-world/e2e/src/app.po.ts (208 bytes)

> node-sass@4.9.3 install /home/ubuntu/Documents/my-angular-hello-world/node_modules/node-sass
> node scripts/install.js

Cached binary found at /home/ubuntu/.npm/node-sass/4.9.3/linux-x64-57_binding.node

> circular-json@0.5.7 postinstall /home/ubuntu/Documents/my-angular-hello-world/node_modules/circular-json
> echo ''; echo "\x1B[1mCircularJSON\x1B[0m is in \x1B[4mmaintenance only\x1B[0m, \x1B[1mflatted\x1B[0m is its successor."; echo ''


\x1B[1mCircularJSON\x1B[0m is in \x1B[4mmaintenance only\x1B[0m, \x1B[1mflatted\x1B[0m is its successor.


> node-sass@4.9.3 postinstall /home/ubuntu/Documents/my-angular-hello-world/node_modules/node-sass
> node scripts/build.js

Binary found at /home/ubuntu/Documents/my-angular-hello-world/node_modules/node-sass/vendor/linux-x64-57/binding.node
Testing binary
Binary is fine
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

added 1081 packages in 29.916s
    Successfully initialized git.

This creates our first project folder. Now we open this folder in visual studio code editor. Now to load our application in the web server. We type the following at the command prompt:

$ ng serve
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
                                                                                          
Date: 2018-10-02T08:01:48.746Z
Hash: 6123a2c4b979c7ced5fe
Time: 10356ms
chunk {main} main.js, main.js.map (main) 10.7 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 227 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.22 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 15.6 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.28 MB [initial] [rendered]
ℹ ｢wdm｣: Compiled successfully.


This has loaded the application to the web server.

Now, we can access the following URL ( http://localhost:4200/ ) at the web browser.

Now, we have a live development server which is serving at localhost and port = 4200. Angular CLI compiled our application.