Review Angular CLI boilerplate

tschaffter commented 3 years ago

Motivation

This could be a candidate boiler plate for future web clients developed by the R&BT Team (e.g. ROCC, Challenge Platform).

Angular version 11 has been released since the release of the tutorial listed below.

Resources

How to build an Angular 8 app from scratch in 11 easy steps

tschaffter commented 3 years ago

Example code will be added here: https://github.com/Sage-Bionetworks/angular-project-example

tschaffter commented 3 years ago

Create new Angular workspace and application using the official tutorial.

$ ng new angular-tour-of-heroes
? Do you want to enforce stricter type checking and stricter bundle budgets in the workspace?
  This setting helps improve maintainability and catch bugs ahead of time.
  For more information, see https://angular.io/strict Yes
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS   [ https://sass-lang.com/documentation/syntax#scss                ]
CREATE angular-tour-of-heroes/README.md (1028 bytes)
CREATE angular-tour-of-heroes/.editorconfig (274 bytes)
CREATE angular-tour-of-heroes/.gitignore (631 bytes)
CREATE angular-tour-of-heroes/angular.json (3833 bytes)
CREATE angular-tour-of-heroes/package.json (1212 bytes)
CREATE angular-tour-of-heroes/tsconfig.json (783 bytes)
CREATE angular-tour-of-heroes/tslint.json (3185 bytes)
CREATE angular-tour-of-heroes/.browserslistrc (703 bytes)
CREATE angular-tour-of-heroes/karma.conf.js (1439 bytes)
CREATE angular-tour-of-heroes/tsconfig.app.json (287 bytes)
CREATE angular-tour-of-heroes/tsconfig.spec.json (333 bytes)
CREATE angular-tour-of-heroes/src/favicon.ico (948 bytes)
CREATE angular-tour-of-heroes/src/index.html (305 bytes)
CREATE angular-tour-of-heroes/src/main.ts (372 bytes)
CREATE angular-tour-of-heroes/src/polyfills.ts (2830 bytes)
CREATE angular-tour-of-heroes/src/styles.scss (80 bytes)
CREATE angular-tour-of-heroes/src/test.ts (753 bytes)
CREATE angular-tour-of-heroes/src/assets/.gitkeep (0 bytes)
CREATE angular-tour-of-heroes/src/environments/environment.prod.ts (51 bytes)
CREATE angular-tour-of-heroes/src/environments/environment.ts (662 bytes)
CREATE angular-tour-of-heroes/src/app/app-routing.module.ts (245 bytes)
CREATE angular-tour-of-heroes/src/app/app.module.ts (393 bytes)
CREATE angular-tour-of-heroes/src/app/app.component.scss (0 bytes)
CREATE angular-tour-of-heroes/src/app/app.component.html (25757 bytes)
CREATE angular-tour-of-heroes/src/app/app.component.spec.ts (1105 bytes)
CREATE angular-tour-of-heroes/src/app/app.component.ts (227 bytes)
CREATE angular-tour-of-heroes/e2e/protractor.conf.js (904 bytes)
CREATE angular-tour-of-heroes/e2e/tsconfig.json (274 bytes)
CREATE angular-tour-of-heroes/e2e/src/app.e2e-spec.ts (673 bytes)
CREATE angular-tour-of-heroes/e2e/src/app.po.ts (274 bytes)
✔ Packages installed successfully.
    Directory is already under version control. Skipping initialization of git.

tschaffter commented 3 years ago

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

Angular CLI: 11.2.2
Node: 12.20.1
OS: linux x64

Angular: 11.2.3
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1102.2
@angular-devkit/build-angular   0.1102.2
@angular-devkit/core            11.2.2
@angular-devkit/schematics      11.2.2
@angular/cli                    11.2.2
@schematics/angular             11.2.2
@schematics/update              0.1102.2
rxjs                            6.6.6
typescript                      4.1.5

tschaffter commented 3 years ago

This command build the app and open the browser at the address http://localhost:4200. The hot server automatically reload when one of the source file is updated.

ng serve --open

Note: The above behavior also works when using Windows and WSL. 👍

tschaffter commented 3 years ago

Angular displays an overlay on top of the page when there is a build error:

tschaffter commented 3 years ago

I went over the entire official Angular tutorial. The Angular CLI works create to create new components and services. Everything I know working with up to Angular version 9 seems still valid with version 11.

tschaffter commented 3 years ago

Angular.io

Code base of angular.io, the documentation website for Angular.

Note: I used this website as a reference when we developed the SageBio Collaboration Portal.

https://angular.io/
The documentation website is now part of the Angular repository: angular/angular/tree/master/aio

Features: complete and good-looking layout (home page, navigation bar, left menu), showcase all the bells and whistles of Angular and Material.

SageBio Collaboration Portal

Portal developed by me for a collaboration between Genentech and Sage Bionetworks.

GitHub repository Sage-Bionetworks/sagebio-collaboration-portal
Live example (down)

Features: MEAN full-stack (Mongo, Express, Angular, Node), register (local account, Google OAuth 2.0, SAML, ConnectID), uses Angular Material, WebSocket, optimized for production, dockerized.