Angular 9 - Hello World

This post will take you to create An hello world first application step by step using Angular9 with example..

Angular 9 CLI

We are create a new application using Angular 9 version, In my previous post, Learned how to install Angular CLI

Check for Angular 9 Cli installation

Please issue following commands ng --version

D:\Angular 9 tutorials>ng --version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 9.0.5
Node: 12.14.1
OS: win32 x64

Angular:
...
Ivy Workspace:

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.900.5
@angular-devkit/core         9.0.5
@angular-devkit/schematics   9.0.5
@schematics/angular          9.0.5
@schematics/update           0.900.5
rxjs                         6.5.3

ANgular cli is already installed globally aviable,

Now Lets create an application

Create Hello world First App using cli ng command

To create a new application, please use ng new applicationname as follows

D:\Angular 9 tutorials>ng new angular9-helloworld-example
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
CREATE angular9-helloworld-example/angular.json (3735 bytes)
CREATE angular9-helloworld-example/package.json (1304 bytes)
CREATE angular9-helloworld-example/README.md (1042 bytes)
CREATE angular9-helloworld-example/tsconfig.json (489 bytes)
CREATE angular9-helloworld-example/tslint.json (1953 bytes)
CREATE angular9-helloworld-example/.editorconfig (246 bytes)
CREATE angular9-helloworld-example/.gitignore (631 bytes)
CREATE angular9-helloworld-example/browserslist (429 bytes)
CREATE angular9-helloworld-example/karma.conf.js (1039 bytes)
CREATE angular9-helloworld-example/tsconfig.app.json (210 bytes)
CREATE angular9-helloworld-example/tsconfig.spec.json (270 bytes)
CREATE angular9-helloworld-example/src/favicon.ico (948 bytes)
CREATE angular9-helloworld-example/src/index.html (311 bytes)
CREATE angular9-helloworld-example/src/main.ts (372 bytes)
CREATE angular9-helloworld-example/src/polyfills.ts (2835 bytes)
CREATE angular9-helloworld-example/src/styles.css (80 bytes)
CREATE angular9-helloworld-example/src/test.ts (753 bytes)
CREATE angular9-helloworld-example/src/assets/.gitkeep (0 bytes)
CREATE angular9-helloworld-example/src/environments/environment.prod.ts (51 bytes)
CREATE angular9-helloworld-example/src/environments/environment.ts (662 bytes)
CREATE angular9-helloworld-example/src/app/app-routing.module.ts (246 bytes)
CREATE angular9-helloworld-example/src/app/app.module.ts (393 bytes)
CREATE angular9-helloworld-example/src/app/app.component.html (25755 bytes)
CREATE angular9-helloworld-example/src/app/app.component.spec.ts (1122 bytes)
CREATE angular9-helloworld-example/src/app/app.component.ts (231 bytes)
CREATE angular9-helloworld-example/src/app/app.component.css (0 bytes)
CREATE angular9-helloworld-example/e2e/protractor.conf.js (808 bytes)
CREATE angular9-helloworld-example/e2e/tsconfig.json (214 bytes)
CREATE angular9-helloworld-example/e2e/src/app.e2e-spec.ts (660 bytes)
CREATE angular9-helloworld-example/e2e/src/app.po.ts (301 bytes)
√ Packages installed successfully.

It creates new application prototype and required files and install all the dependencies.

Application is created with name Angular9-helloworld-example.

First go the root of application folder,Issue ng serve command command to start the application.

D:\Angular 9 tutorials>cd angular9-helloworld-example
D:\Angular 9 tutorials\angular9-helloworld-example>ng serve
0% compiling
Compiling @angular/core : es2015 as esm2015

Compiling @angular/common : es2015 as esm2015

Compiling @angular/platform-browser : es2015 as esm2015

Compiling @angular/platform-browser-dynamic : es2015 as esm2015

Compiling @angular/router : es2015 as esm2015

chunk {main} main.js, main.js.map (main) 60.7 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 140 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 9.73 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 2.99 MB [initial] [rendered]
Date: 2020-03-11T10:21:13.986Z - Hash: 32a1a4e4c81c6aa350e0 - Time: 22082ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
: Compiled successfully.

Date: 2020-03-11T10:21:15.501Z - Hash: 6570a280f921e82b16bd
4 unchanged chunks
chunk {main} main.js, main.js.map (main) 60.7 kB [initial] [rendered]
Time: 934ms
: Compiled successfully.

Application started and running, By default, listens at 4200

Open browser and give url localhost:4200/ to access an application

Change default port in angular application

4200 is default port. To change the default port, Using --port=9100 option as seen below

D:\Angular 9 tutorials\angular9-helloworld-example>ng serve --port=9100

chunk {main} main.js, main.js.map (main) 60.7 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 140 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 9.73 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 2.99 MB [initial] [rendered]
Date: 2020-03-11T10:24:31.874Z - Hash: 32a1a4e4c81c6aa350e0 - Time: 6151ms
** Angular Live Development Server is listening on localhost:9100, open your browser on http://localhost:9100/ **
: Compiled successfully.

Default port is changed to 9100 and application can be accessed with localhost:9100