upgrade: v12

Author: codediodeio

README.md

@@ -1,7 +1,5 @@
 <p align="center">
 
-<a href="https://slackin-pbfjhfxnsa.now.sh"><img src="https://slackin-pbfjhfxnsa.now.sh/badge.svg"></a>
-
 <a href="https://circleci.com/gh/codediodeio/angular-firestarter"><img src="https://circleci.com/gh/codediodeio/angular-firestarter.svg?style=svg"></a>
 
 </p>
@@ -18,7 +16,7 @@ Firestarter is an Angular PWA powered by Firebase.
 
 ## Features
 
-- Angular 9.x + Firebase
+- Angular 12.x + Firebase
 - Installable PWA
 - OAuth and Email/Password Signup with Firebase
 - Drag & drop Kanban demo with Firestore

package-lock.json

@@ -11,53 +11,56 @@
     "serve": "node serve-script",
     "build:prerender": "npm run build:client-and-server-bundles && node prerender.js",
     "serve:prerender": "http-server dist/browser -c-1",
-    "compile:server_bak": "webpack --config webpack.server.config.js --progress --colors",
-    "build:ssr_bak": "npm run build:client-and-server-bundles && npm run compile:server",
-    "serve:ssr_bak": "node dist/server",
-    "build:client-and-server-bundles_bak": "ng build --prod && ng run firestarter:server:production",
+    "compile:server": "webpack --config webpack.server.config.js --progress --colors",
+    "build:ssr": "npm run build:client-and-server-bundles && npm run compile:server",
+    "serve:ssr": "node dist/server",
+    "build:client-and-server-bundles": "ng build && ng run firestarter:server:production",
     "dev:ssr": "ng run firestarter:serve-ssr",
-    "serve:ssr": "node dist/server/main.js",
-    "build:ssr": "ng build --prod && ng run firestarter:server:production",
     "prerender": "ng run firestarter:prerender"
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~9.0.1",
-    "@angular/cdk": "~9.0.0",
-    "@angular/common": "~9.0.1",
-    "@angular/compiler": "~9.0.1",
-    "@angular/core": "~9.0.1",
-    "@angular/fire": "^5.4.2",
-    "@angular/forms": "~9.0.1",
-    "@angular/material": "^9.0.0",
-    "@angular/platform-browser": "~9.0.1",
-    "@angular/platform-browser-dynamic": "~9.0.1",
-    "@angular/platform-server": "~9.0.1",
-    "@angular/router": "~9.0.1",
-    "@angular/service-worker": "~9.0.1",
+    "@angular/animations": "~12.0.1",
+    "@angular/cdk": "~12.0.1",
+    "@angular/common": "~12.0.1",
+    "@angular/compiler": "~12.0.1",
+    "@angular/core": "~12.0.1",
+    "@angular/fire": "^6.1.5",
+    "@angular/forms": "~12.0.1",
+    "@angular/material": "^12.0.1",
+    "@angular/platform-browser": "~12.0.1",
+    "@angular/platform-browser-dynamic": "~12.0.1",
+    "@angular/platform-server": "~12.0.1",
+    "@angular/router": "~12.0.1",
+    "@angular/service-worker": "~12.0.1",
     "@nestjs/common": "^6.11.6",
     "@nestjs/core": "^6.11.6",
     "@nestjs/ng-universal": "^3.0.0",
     "@nestjs/platform-express": "^6.11.6",
-    "@nguniversal/express-engine": "^9.0.0",
+    "@nguniversal/express-engine": "^12.0.0",
     "express": "^4.15.2",
-    "firebase": "7.8.1",
+    "firebase": "^8.6.2",
     "reflect-metadata": "^0.1.13",
     "rxjs": "~6.5.4",
     "tslib": "^1.10.0",
-    "zone.js": "~0.10.2"
+    "zone.js": "^0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.900.2",
-    "@angular/cli": "~9.0.2",
-    "@angular/compiler-cli": "~9.0.1",
-    "@angular/language-service": "~9.0.1",
-    "@nguniversal/builders": "^9.0.0",
+    "@angular-devkit/architect": "0.1200.1",
+    "@angular-devkit/build-angular": "~12.0.1",
+    "@angular/cli": "~12.0.1",
+    "@angular/compiler-cli": "~12.0.1",
+    "@angular/language-service": "~12.0.1",
+    "@nguniversal/builders": "^12.0.0",
     "@types/express": "^4.17.0",
-    "@types/node": "^12.11.1",
     "@types/jasmine": "~3.5.3",
     "@types/jasminewd2": "~2.0.8",
-    "codelyzer": "^5.1.2",
+    "@types/node": "^12.11.1",
+    "codelyzer": "^6.0.2",
+    "firebase-tools": "^7.13.0",
+    "fuzzy": "^0.1.3",
+    "inquirer": "^7.0.4",
+    "inquirer-autocomplete-prompt": "^1.0.2",
     "jasmine-core": "~3.5.0",
     "jasmine-spec-reporter": "~4.2.1",
     "karma": "~4.4.1",
@@ -71,12 +74,7 @@
     "ts-loader": "^6.2.1",
     "ts-node": "~8.6.2",
     "tslint": "~6.0.0",
-    "typescript": "~3.7.5",
-    "@angular-devkit/architect": "0.900.2",
-    "firebase-tools": "^7.13.0",
-    "fuzzy": "^0.1.3",
-    "inquirer": "^7.0.4",
-    "inquirer-autocomplete-prompt": "^1.0.2",
+    "typescript": "^4.2.3",
     "wait-on": "^4.0.0",
     "webpack-cli": "^3.3.11"
   }

package.json

@@ -6,8 +6,9 @@ import { join } from 'path';
   imports: [
     AngularUniversalModule.forRoot({
       viewsPath: join(process.cwd(), 'dist/browser'),
-      bundle: require('../server/main'),
-      liveReload: true
+      bootstrap: ApplicationModule
+      // bundle: require('../server/main'),
+      // liveReload: true
     })
   ]
 })

server/app.module.ts

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { AngularFireAuth } from '@angular/fire/auth';
 import { AngularFirestore } from '@angular/fire/firestore';
-import * as firebase from 'firebase/app';
+import firebase from 'firebase/app';
 import { switchMap, map } from 'rxjs/operators';
 import { Board, Task } from './board.model';
 
@@ -15,7 +15,7 @@ export class BoardService {
    * Creates a new board for the current user
    */
   async createBoard(data: Board) {
-    const user = await this.afAuth.auth.currentUser;
+    const user = await this.afAuth.currentUser;
     return this.db.collection('boards').add({
       ...data,
       uid: user.uid,

src/app/kanban/board.service.ts

@@ -19,7 +19,7 @@ export class AuthGuard implements CanActivate {
     next: ActivatedRouteSnapshot,
     state: RouterStateSnapshot
   ): Promise<boolean> {
-    const user = await this.afAuth.auth.currentUser;
+    const user = await this.afAuth.currentUser;
     const isLoggedIn = !!user;
     if (!isLoggedIn) {
       this.snack.authError();

src/app/user/auth.guard.ts

@@ -75,13 +75,13 @@ export class EmailLoginComponent implements OnInit {
 
     try {
       if (this.isLogin) {
-        await this.afAuth.auth.signInWithEmailAndPassword(email, password);
+        await this.afAuth.signInWithEmailAndPassword(email, password);
       }
       if (this.isSignup) {
-        await this.afAuth.auth.createUserWithEmailAndPassword(email, password);
+        await this.afAuth.createUserWithEmailAndPassword(email, password);
       }
       if (this.isPasswordReset) {
-        await this.afAuth.auth.sendPasswordResetEmail(email);
+        await this.afAuth.sendPasswordResetEmail(email);
         this.serverMessage = 'Check your email';
       }
     } catch (err) {

src/app/user/email-login/email-login.component.ts

@@ -1,6 +1,6 @@
 import { Directive, HostListener } from '@angular/core';
 import { AngularFireAuth } from '@angular/fire/auth';
-import * as firebase from 'firebase/app';
+import firebase from 'firebase/app';
 
 @Directive({
   selector: '[appGoogleSignin]'
@@ -10,6 +10,6 @@ export class GoogleSigninDirective {
 
   @HostListener('click')
   onclick() {
-    this.afAuth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider());
+    this.afAuth.signInWithPopup(new firebase.auth.GoogleAuthProvider());
   }
 }

src/app/user/google-signin.directive.ts

@@ -16,6 +16,6 @@ <h5>OR</h5>
       Logged in as <strong>{{ user.email }}</strong>
     </p>
 
-    <button mat-stroked-button (click)="afAuth.auth.signOut()">Logout</button>
+    <button mat-stroked-button (click)="afAuth.signOut()">Logout</button>
   </div>
 </main>