Running the sample application

Now that we have started our project, we will run the built-in Angular CLI server to see how our application looks:

1. Open VS Code in the project root to the chapter03 folder.
2. For this example, we will use the integrated Terminal for the code; for this, click on the top menu in view, and then click Integrated Terminal.

3. Type the following command in the Terminal:

npm start

You will see a message similar to the following:

 ** NG Live Development Server is listening on localhost:4200, open  
 your  
 browser on http://localhost:4200/ **
 Date: xxxx                                                        
 Hash: xxxx
 Time: 16943ms
 chunk {inline} inline.bundle.js (inline) 3.85 kB [entry] [rendered]
 chunk {main} main.bundle.js (main) 20.8 kB [initial] [rendered]
 chunk {polyfills} polyfills.bundle.js (polyfills) 549 kB [initial]  
 [rendered]
 chunk {styles} styles.bundle.js (styles) 41.5 kB [initial]  
 [rendered]
 chunk {vendor} vendor.bundle.js (vendor) 8.45 MB [initial] 
 [rendered]

4. Behind the scenes, the Angular CLI will use the webpack module manager. Later in this book, you will see how to export and customize the webpack file.
5. Now, go to http://localhost:4200 and check the result; you will see the welcome page from the boilerplate application that we created previously. You can find the code behind this page at src/app/app.component.html – it's our template.

Now, it's time to add a new module to our application.