19-05 PWA with Angular

ng new lovely-offline --routing --style=scss

npm install --save @angular/material @angular/cdk @angular/animations

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

ng build --prod

npm install -g firebase-tools

firebase login

firebase init

firebase deploy

npm install firebase @angular/fire --save

import { Component } from '@angular/core';
import { AngularFirestore } from 'angularfire2/firestore';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-root',
  template: `
    <h1>Bind Firestore collection example</h1>
    <ul>
      <li class="text" *ngFor="let note of notes$ | async">
        {{note.title}}
      </li>
    </ul>
    <router-outlet></router-outlet>
  `,
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  notes$: Observable<any[]>;
  constructor(db: AngularFirestore) {
    this.notes$ = db.collection('notes').valueChanges();
  }
}

ng g m modules/layout

ng generate component modules/layout/header

ng generate component modules/layout/footer

- src/app/modules/layout/header
    - header.component.html
    - header.component.scss
    - header.component.ts
- src/app/modules/layout/footer
    - footer.component.html
    - footer.component.scss
    - footer.component.ts
- src
    - styles.scss

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
  <div class="appress-pwa-note">
    <app-header></app-header>
    <div class="main">
      <router-outlet></router-outlet>
    </div>
    <app-footer></app-footer>
  </div>
  `,
})
export class AppComponent { }

ng generate module modules/user --routing

ng generate component modules/user/userContainer --flat

- UserRoutingModule
- AppRoutingModule

ng generate service modules/core/firebaseAuth

- src/app/modules/core/
    - firebase-auth.service.ts
- src/app/modules/user/
    - user-container.component.ts
    - user-container.component.html
    - user-container.component.scss