Angular: Create a web application with Angular CLI

Learn how to create an Angular project that follows best practices using Angular CLI.

Prerequisites:

1. Install Angular CLI
2. Install Git

The Short Version

1. Run the following command from your shell:

ng new ddo-gear-optimizer-ui

2. Answer the prompts that Angular CLI gives you.

A folder ddo-gear-optimizer-ui/ is created with an Angular project inside.

The Details

We want to create the client-side of our dynamic web application. To get started, we use Angular CLI to create an Angular project that will serve the HTML, CSS, and client-side JavaScript that will run on the client’s web browser to provide the user interface (UI).

1. Run the following command from your shell:

ng new ddo-gear-optimizer-ui

2. Angular CLI will ask you if you want to add the Angular Routing module. We do want it for our project, so type <Y> and <Enter>.

? Would you like to add Angular routing? (y/N) y

3. Next, Angular CLI will ask you which stylesheet format you want to use. Type <Enter> to go with the default, CSS.

? Which stylesheet format would you like to use? (Use arrow keys)
> CSS
  SCSS   [ https://sass-lang.com/documentation/syntax#scss                ]
  Sass   [ https://sass-lang.com/documentation/syntax#the-indented-syntax ]
  Less   [ http://lesscss.org                                             ]
  Stylus [ http://stylus-lang.com                                         ]

Angular CLI will start downloading all the packages needed to create the Angular project. It may take a few minutes to do this, and you will see the “Installing packages” message while the operation is in progress. Once everything is done, the output will be something like this:

CREATE sample-angular-cli/angular.json (3662 bytes)
CREATE sample-angular-cli/package.json (1294 bytes)
CREATE sample-angular-cli/README.md (1033 bytes)
CREATE sample-angular-cli/tsconfig.json (489 bytes)
CREATE sample-angular-cli/tslint.json (3125 bytes)
CREATE sample-angular-cli/.editorconfig (274 bytes)
CREATE sample-angular-cli/.gitignore (631 bytes)
CREATE sample-angular-cli/browserslist (429 bytes)
CREATE sample-angular-cli/karma.conf.js (1030 bytes)
CREATE sample-angular-cli/tsconfig.app.json (210 bytes)
CREATE sample-angular-cli/tsconfig.spec.json (270 bytes)
CREATE sample-angular-cli/src/favicon.ico (948 bytes)
CREATE sample-angular-cli/src/index.html (302 bytes)
CREATE sample-angular-cli/src/main.ts (372 bytes)
CREATE sample-angular-cli/src/polyfills.ts (2835 bytes)
CREATE sample-angular-cli/src/styles.css (80 bytes)
CREATE sample-angular-cli/src/test.ts (753 bytes)
CREATE sample-angular-cli/src/assets/.gitkeep (0 bytes)
CREATE sample-angular-cli/src/environments/environment.prod.ts (51 bytes)
CREATE sample-angular-cli/src/environments/environment.ts (662 bytes)
CREATE sample-angular-cli/src/app/app-routing.module.ts (246 bytes)
CREATE sample-angular-cli/src/app/app.module.ts (393 bytes)
CREATE sample-angular-cli/src/app/app.component.html (25757 bytes)
CREATE sample-angular-cli/src/app/app.component.spec.ts (1095 bytes)
CREATE sample-angular-cli/src/app/app.component.ts (222 bytes)
CREATE sample-angular-cli/src/app/app.component.css (0 bytes)
CREATE sample-angular-cli/e2e/protractor.conf.js (808 bytes)
CREATE sample-angular-cli/e2e/tsconfig.json (214 bytes)
CREATE sample-angular-cli/e2e/src/app.e2e-spec.ts (651 bytes)
CREATE sample-angular-cli/e2e/src/app.po.ts (301 bytes)
√ Packages installed successfully.

If the process is successful, you will have:

1. A new folder ddo-gear-optimizer-ui/ with an Angular project inside.
2. The Angular project will be initialized as a Git repository, complete with a .gitignore file that will ignore IntelliJ files.
3. A framework that will take the Typescript (.ts) code that you write and convert it into a version of JavaScript that is compatible with all of the popular web browsers.
4. A unit-test framework.
5. An end-to-end test framework.
6. A build environment framework.
7. A default favicon for your website.
8. The start of a JavaScript unit test framework.
9. Polyfills to help your application run on both modern and older browsers.
10. A framework for managing all of the third-party code libraries (dependencies) that you will use as building blocks in your projects.
11. A best-practices folder structure for the code you write.
12. An Angular application that when run will:
    1. Boot up a web server.
    2. Serve a demo web page at http://localhost:4200/.
    3. Listen for changes that you make to the project’s code, compile the new changes, and refresh the web page you are viewing.
    4. Merge all the individual .ts, .css, and .html files into a bundle named main.js. Bundling these files reduces the number of requests that the web browser needs to make when serving a web page, reducing page load times.
    5. Minify code in production to reduce page load times.
    6. Serve .map files, so that you can debug the individual .ts, .css, and .html files in your browser’s developer console.
    7. Serve cache-busting files in production.
    8. Provide differential loading in production.

Versions:

• Angular CLI: 9.1.3. Your experience may vary with a different version of Angular CLI.