Angular 13 CLI
We are creating a new application using the Angular 9 version, In my previous post, Learned how to install Angular CLI
Check for Angular 9 Cli installation
Please issue the following commands ng --version
A:\work\angular-app>ng --version
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 13.0.3
Node: 14.17.0
Package Manager: npm 7.11.1
OS: win32 x64
Angular: 13.0.2
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1300.3
@angular-devkit/build-angular 13.0.3
@angular-devkit/core 13.0.3
@angular-devkit/schematics 13.0.3
@angular/cli 13.0.3
@schematics/angular 13.0.3
rxjs 7.4.0
typescript 4.4.4
angular cli is already installed globally available,
Now let’s create an application
Create Hello World First App using the CLI ng command
To create a new application, please use ng new applicationname as follows
D:\Angular 13 tutorials>ng new angular12-helloworld-example
It creates a new application prototype and required files and install all the dependencies.
Application is created with the name Angular13-helloworld-example.
First, go to the root of the application folder, Issue ng serve command command to start the application.
D:\Angular 13 tutorials>cd angular12-helloworld-example
D:\Angular 13 tutorials\angular13-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 the browser and give url localhost:4200/ to access an application
Change default port in angular application
4200 is the default port.
To change the default port, Use --port=9100 option as seen below
D:\Angular 13 tutorials\angular13-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.
The default port is changed to 9100 and the application can be accessed with localhost:9100