Evergreen DokuWiki

• Learning the basics of Angular5
  • https://angular.io/tutorial
• Bootstrap Version 4
  • https://getbootstrap.com/
• ng-bootstrap – Angular 5 / Bootstrap 4 compatible Bootstrap controls
  • https://ng-bootstrap.github.io/#/components/
• Webpack – JS bundling, minification, lazy loading, and more used by Angular5.
  • https://webpack.js.org/
• ReactiveX – Reactive extension used by Angular5
  • http://reactivex.io/rxjs/
• Typescript docs
  • https://www.typescriptlang.org/docs/home.html
• Upgrade Process
  • https://angular.io/guide/upgrade

• Implicit in the move to Ang5 is a move to BS 4. The Ang5-compatible bootstrap library ng-bootstrap supports BS 4 only.
• Version 4 is mostly backward compatible with version 3.
• The "panel" is no more – replaced with "card".
• Glyphicons are deprecated (and have license restrictions). BS suggests some alternatives.
  • https://getbootstrap.com/docs/4.0/extend/icons/
  • I tested the Google Material Icons and they work well and use an Apache 2 license. Attribution is optional.
    • https://material.io/icons/
• The utility classes have been expanded
  • https://getbootstrap.com/docs/4.0/utilities/
  • Margins, padding, text, colors, borders, and more!
  • These remove the need to write a lot of local CSS. Want a small amount of margin up top? class="mt-1"

1. Follow the AngularJS Style Guide
2. Using a Module Loader
   1. Angular5 (well, ng-cli) uses Webpack by default.
   2. May be implemented independent of any Ang5 upgrade plans.
   3. Can be rolled out in multiple phases.
      1. Phase I: Use webpack as a drop-in replacement for Grunt for compiling builds (and use npm to run karma unit tests).
         1. This is low impact. No application code changes are required.
         2. I have a branch that does this (plus Angular 1.6 – TODO: post to LP)
      2. Phase II: Start using ES6-style module 'import' statements for specifying dependencies.
         1. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
         2. These replace <script/> imports
3. Migrating to TypeScript
4. Using Component Directives
5. Upgrading with ngUpgrade

See also https://angular-2-training-book.rangle.io/handout/migrate/ng-upgrade/order_of_operations.html