HelloAngular

Notes, tutorials, experiments, playground for Angular 9+

ng serve

ng generate

  Collection "@schematics/angular" (default):
    appShell
    application
    class
    component
    directive
    enum
    guard
    interface
    library
    module
    pipe
    service
    serviceWorker
    universal
    webWorker

ng build
ng build --prod

ng test
ng e2e

Added features

• Prettier
• Replace Karma with Jest
• Replace Protractor with Puppeteer
• Use Spectator as test helper
• Add Husky

Authentication

• Create a login page (Form: username, password, submit)
• POST credentials to /api/login
• Use response headers and interceptors to track auth sessions
• Dealing with session cookies
• Add AuthGuard
• Create CurrentUser service

Mirage.js

• Add/remove Mirage.js from production build.
• Activate/deactivate Mirage.js before Angular Router.

Bootstrap 4

Option #1: Original Bootstrap 4.

$ yarn add bootsrap
$ yarn add jquery
$ yarn add popper.js
$ echo '@import "~bootstrap";' >> src/styles.scss

Extend angular.json to import external packages in projects > hello-angular > architect > build > options.

"scripts": [
  "./node_modules/jquery/dist/jquery.slim.min.js",
  "./node_modules/popper.js/dist/umd/popper.min.js",
  "./node_modules/bootstrap/dist/js/bootstrap.min.js"
]

Option #2: ng-bootstrap. No animation and custom API.

$ yarn add bootstrap
$ echo '@import "~bootstrap";' >> src/styles.scss
$ yarn add @ng-bootstrap/ng-bootstrap

Option #3: ngx-bootstrap

• It comes with animation out of the box.
• This is my suggested package.

$ yarn add ngx-bootstrap bootstrap

Instead of importing files in angular.json add import to styles.scss.

@import '~bootstrap';
@import '~ngx-bootstrap/datepicker/bs-datepicker';

My Store App

• Add new "store" route to app-routing.module.ts.

• Add top bar with store name and checkout icon

• Add title for product list

Replace karma unit test with Jest

ng add @briebug/jest-schematic

• Check package.json file. Remove almost everything which is karma and jasmine related. You can remove the @briebug/jest-schematic also.
• If you need protractor, you can keep the jasmine-spec-reporter package.
• Run yarn format.

Known issue: projects are not supported out of the box, they need a manual adjustment.

Spectator

Add Spectator as default collection:

$ ng config cli.defaultCollection @ngneat/spectator

Reading

• How to split into modules?
• Angular Unit Testing

Authentication

• Article
• Sample App