codediodeio / angular-firestarter

🍱 :fire: Angular + Firebase Progressive Web App Starter

FireStarter

Firestarter is an Angular PWA powered by Firebase.

• Live Demo
• Lessons and Screencasts
• Join the Slack Team

Features

• Angular 12.x + Firebase
• Installable PWA
• OAuth and Email/Password Signup with Firebase
• Drag & drop Kanban demo with Firestore
• Angular Universal SSR with Nest.js deployed to Google Cloud Run
• Optional SSR Prerendering Script

Usage

1. Run

• git clone https://github.com/codediodeio/angular-firestarter.git firestarter
• cd firestarter
• npm install

2. Create a project at https://firebase.google.com/ and grab your web config:

3. Add the config to your Angular environment

src/environments/

Update the environment.prod.ts and environment.ts files.

export const environment = {
  production: false,
  firebase: {
    apiKey: 'APIKEY',
    authDomain: 'DEV-APP.firebaseapp.com',
    databaseURL: 'https://DEV-APP.firebaseio.com',
    projectId: 'DEV-APP',
    storageBucket: 'DEV-APP.appspot.com',
    messagingSenderId: '...',
    appId: '...',
  }
};

5. Run ng serve

angular-firestarter's Issues

File list : permission_denied

Hi,
I can upload files, but I can't get the file list :
Rules :
service firebase.storage { match /b/{bucket}/o { match /{allPaths=**} { allow read, write: if true; } } }

util.js:189 FIREBASE WARNING: Exception was thrown by user callback. Error: permission_denied at /uploads: Client doesn't have permission to access the desired data.

ERROR Error: permission_denied at /uploads: Client doesn't have permission to access the desired data.

Firestore Error/Warning

when pulling this and starting npm install recursive unzipping cypress occurs

[19:35:52] Unzipping Cypress 53% 71s [title changed]
[19:35:52] Unzipping Cypress 53% 71s [title changed]
[19:35:52] Unzipping Cypress 53% 71s [title changed]
[19:35:52] Unzipping Cypress 53% 71s [title changed]
[19:35:52] Unzipping Cypress 53% 71s [title changed]
[19:35:52] Unzipping Cypress 53% 71s [title changed]
[19:35:52] Unzipping Cypress 53% 71s [title changed]
[19:35:52] Unzipping Cypress 53% 71s [title changed]
[19:35:52] Unzipping Cypress 53% 71s [title changed]
[19:35:52] Unzipping Cypress 53% 71s [title changed]
[19:35:52] Unzipping Cypress 53% 71s [title changed]
[19:35:52] Unzipping Cypress 53% 71s [title changed]
[19:35:52] Unzipping Cypress 53% 71s [title changed]
[19:35:52] Unzipping Cypress 53% 71s [title changed]
[19:35:52] Unzipping Cypress 53% 71s [title changed]

Angular Firebase Developers Slack Team Links on demo broken

The link to join the slack Team from the home screen of the demo project is expired.

Mobile Not working (Safari)

Your demo site also emit same error logs.

And stopped at ~$ bootstrapping firestarter...

[Error] SyntaxError: Unexpected token '>'
	(anonymous function) (firestarter-96e46.firebaseapp.com:4)
[Error] TypeError: undefined is not a function (evaluating 'Object.assign({},t,e)')
	(anonymous function) (vendor.c276711844f3b6cbdd8f.bundle.js:1:2075300)
	reduce
	g (vendor.c276711844f3b6cbdd8f.bundle.js:1:2075265)
	qbdv (vendor.c276711844f3b6cbdd8f.bundle.js:1:1064523)
	n (inline.80840b273b4264c89c7f.bundle.js:1:106)
	fc+i (vendor.c276711844f3b6cbdd8f.bundle.js:1:914679)
	n (inline.80840b273b4264c89c7f.bundle.js:1:106)
	bm2B (vendor.c276711844f3b6cbdd8f.bundle.js:1:742405)
	n (inline.80840b273b4264c89c7f.bundle.js:1:106)
	cDNt (main.9d15e677b9e4c8ec911a.bundle.js:1:43978)
	n (inline.80840b273b4264c89c7f.bundle.js:1:106)
	(anonymous function) (main.9d15e677b9e4c8ec911a.bundle.js:1)
	n (inline.80840b273b4264c89c7f.bundle.js:1:106)
	webpackJsonp (inline.80840b273b4264c89c7f.bundle.js:1:432)
	Global Code (main.9d15e677b9e4c8ec911a.bundle.js:1)

Showing 'It looks like you're using the development build of the Firebase JS SDK' message in console!

I had an issue where this kept showing up in the console.

It was due to the firebase imports in auth.service.ts

Fix:
auth.service.ts:

import * as firebase from 'firebase/app';

and replace all auth.
to firebase.auth.

Add 'projectId' property to environment.ts in README.md doc.

There is a missing 'projectId' property which is required by cloud firestore.

lighthouse socre decreased

Facebook login

when i log in with facebook there is no change to the app. All else seems to be working i.e. facebook asking me for permission to let the app read my profile.

The live demo is not working anymore

Could you guys please fix it?

Error Deploying to Firebase

When I do firebase deploy I get the following:

=== Deploying to 'fireapp-a85bd'...

i  deploying functions, hosting
Running command: npm --prefix "$RESOURCE_DIR" run lint

> functions@ lint /Users/x/Sites/firestarter/functions
> tslint --project tsconfig.json

Running command: npm --prefix "$RESOURCE_DIR" run build

> functions@ build /Users/x/Sites/firestarter/functions
> tsc

../node_modules/@types/blob-util/index.d.ts:13:71 - error TS2304: Cannot find name 'Blob'.

13 export function createBlob(parts: any[], options?: { type: string }): Blob;
                                                                         ~~~~


../node_modules/@types/blob-util/index.d.ts:18:39 - error TS2304: Cannot find name 'Blob'.

18 export function createObjectURL(blob: Blob): string;
                                         ~~~~


../node_modules/@types/blob-util/index.d.ts:28:42 - error TS2304: Cannot find name 'Blob'.

28 export function blobToBinaryString(blob: Blob): Promise<string>;
                                            ~~~~


../node_modules/@types/blob-util/index.d.ts:34:76 - error TS2304: Cannot find name 'Blob'.

34 export function binaryStringToBlob(binary: string, type?: string): Promise<Blob>;
                                                                              ~~~~


../node_modules/@types/blob-util/index.d.ts:39:42 - error TS2304: Cannot find name 'Blob'.

39 export function blobToBase64String(blob: Blob): Promise<string>;
                                            ~~~~


../node_modules/@types/blob-util/index.d.ts:45:76 - error TS2304: Cannot find name 'Blob'.

45 export function base64StringToBlob(base64: string, type?: string): Promise<Blob>;
                                                                              ~~~~


../node_modules/@types/jquery/index.d.ts:7898:20 - error TS2304: Cannot find name 'Event'.

7898     originalEvent: Event;
                        ~~~~~


../node_modules/@types/jquery/index.d.ts:7908:20 - error TS2304: Cannot find name 'Element'.

7908     relatedTarget: Element;
                        ~~~~~~~


../node_modules/@types/jquery/index.d.ts:7928:13 - error TS2304: Cannot find name 'Element'.

7928     target: Element;
                 ~~~~~~~


../node_modules/@types/mocha/index.d.ts:36:13 - error TS2300: Duplicate identifier 'describe'.

36 declare var describe: Mocha.IContextDefinition;
               ~~~~~~~~


../node_modules/@types/mocha/index.d.ts:37:13 - error TS2300: Duplicate identifier 'xdescribe'.

37 declare var xdescribe: Mocha.IContextDefinition;
               ~~~~~~~~~


../node_modules/@types/mocha/index.d.ts:42:13 - error TS2300: Duplicate identifier 'it'.

42 declare var it: Mocha.ITestDefinition;
 ...

npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! functions@ build: `tsc`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the functions@ build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/x/.npm/_logs/2018-07-04T19_12_36_984Z-debug.log

Error: functions predeploy error: Command terminated with non-zero exit code2

question

Howdy,

And thanks for this awesome repo... i'm pretty new to firebase and typescript. and i have a question;

How can i combine the items module with the multiple images upload... so that in the db (not storage) there will be a array of images present where i can then *ngFor over within a template with other info within the json array from items.

Firebase docs are really tough atm... for me as a starter... but it seems pretty basic what i want to achieve here.

Must thx upfront,

ERROR in src/app/core/auth.service.ts(48,35): error TS2339: Property 'auth' does not exist on type 'FirebaseNamespace'.

not working !
ℹ ｢wdm｣: Failed to compile.
^C
paula@notebook:~/Documentos/angular-firestarter$ ng build

Date: 2018-06-23T03:52:16.493Z
Hash: 520950f4a857e8f82be9
Time: 14104ms
chunk {main} main.js, main.js.map (main) 633 bytes [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 688 bytes [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 5.22 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 215 kB [initial] [rendered]

ERROR in src/app/core/auth.service.ts(48,35): error TS2339: Property 'auth' does not exist on type 'FirebaseNamespace'.
src/app/core/auth.service.ts(53,35): error TS2339: Property 'auth' does not exist on type 'FirebaseNamespace'.
src/app/core/auth.service.ts(58,35): error TS2339: Property 'auth' does not exist on type 'FirebaseNamespace'.
src/app/core/auth.service.ts(63,35): error TS2339: Property 'auth' does not exist on type 'FirebaseNamespace'.
src/app/core/auth.service.ts(115,29): error TS2339: Property 'auth' does not exist on type 'FirebaseNamespace'.

Would like to see the json data in the realtime database

It would be helpful for us beginners if the data in the realtime database was exported and placed in this repository for future reference.

Great job!

Thank you!

codediodeio/angular-firestarter: error when installing git clone https://github.com/codediodeio/angular-firestarter.git firestarter

ng --version
Your global Angular CLI version (7.0.2) is greater than your local
version (6.0.1). The local Angular CLI version is used.

To disable this warning use "ng config -g cli.warnings.versionMismatch false".

 _                      _                 ____ _     ___
/ \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|

/ △ \ | '_ \ / | | | | |/ _ | '__| | | | | | |
/ ___ | | | | (| | || | | (| | | | || | | |
// __| ||_, |_,||_,|| _|||
|___/

Angular CLI: 6.0.1
Node: 10.7.0
OS: darwin x64
Angular: 6.0.1
... animations, cli, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, platform-server, router
... service-worker

Package Version

@angular-devkit/architect 0.6.1
@angular-devkit/build-angular 0.6.1
@angular-devkit/build-optimizer 0.6.1
@angular-devkit/core 0.6.1
@angular-devkit/schematics 0.6.1
@angular/pwa 0.6.1
@ngtools/webpack 6.0.1
@schematics/angular 0.6.1
@schematics/update 0.6.1
rxjs 6.1.0
typescript 2.7.2
webpack 4.6.0

and I am getting the following error:

ERROR in ./src/styles.scss (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/styles.scss)
Module build failed: Error: sass-loader requires node-sass >=4. Please install a compatible version.
at Object.sassLoader (/Users/hervegagnon/project/internal/angularFire/firestarter/node_modules/sass-loader/lib/loader.js:31:19)
ERROR in src/app/core/auth.service.ts(5,22): error TS2307: Cannot find module 'firebase'.

Issue #3 Seems to be back again in latest build - Cannot read property 'length' of undefined

TypeError: Cannot read property 'length' of undefined

Cannot read property 'length' of undefined

Hello,
I downloaded your project and I get the error
"Cannot read property 'length' of undefined"
after run
"npm install"
then
npm install --save-dev @angular/cli@latest
and then it show me cannot find module webpack-dev-server
so i run
npm install --save-dev webpack-dev-server

and i get the error
"Cannot read property 'length' of undefined"

FirebaseNamespace

// Sends email allowing user to reset password
resetPassword(email: string) {
const fbAuth = firebase.auth();

ERROR in src/app/core/auth.service.ts(48,35): error TS2339: Property 'auth' does not exist on type 'FirebaseNamespace'.
src/app/core/auth.service.ts(53,35): error TS2339: Property 'auth' does not exist on type 'FirebaseNamespace'.
src/app/core/auth.service.ts(58,35): error TS2339: Property 'auth' does not exist on type 'FirebaseNamespace'.
src/app/core/auth.service.ts(63,35): error TS2339: Property 'auth' does not exist on type 'FirebaseNamespace'.
src/app/core/auth.service.ts(115,29): error TS2339: Property 'auth' does not exist on type 'FirebaseNamespace'.

ℹ ｢wdm｣: Failed to compile.

Angular ClI needs to be updated to latest version

Change "@angular/cli": "1.0.1", in package.json

snapshot.bytesTransferred & snapshot.totalBytes not working

Please check the attached image.
2. The arrow function is also not working.

file upload not working

The file upload system in the repo does not seem to be working. I haven't tweaked it since I finished downloading it, can you help me?

npm run build:all error

When I run the npm run build:all command I get the following error:

> webpack --config webpack.prerender.config.js
Hash: 9b23340b1f8a9397ac3d
Version: webpack 4.6.0
Time: 38ms
Built at: 2018-07-04 12:27:11

ERROR in Entry module not found: Error: Can't resolve './prerender.ts' in '/Users/x/Sites/firestarter'

failed on ng serve

literally followed the readme and fails on ng serve.
npm-debug.log

Type 'Observable<User> | Observable<null>' is not assignable to type 'ObservableInput<User | null>'.

On updating the project, I've run into this problem now.
New to Angular .. so please help.

ERROR in src/app/core/auth.service.ts(32,9): error TS2345: Argument of type '(user: User | null) => Observable | Observable' is not assignable to parameter of type '(value: User | null, index: number) => ObservableInput<User | null>'.
Type 'Observable | Observable' is not assignable to type 'ObservableInput<User | null>'.
Type 'Observable' is not assignable to type 'ObservableInput<User | null>'.
Type 'Observable' is not assignable to type 'ArrayLike<User | null>'.
Property 'length' is missing in type 'Observable'.

src/app/uploads/shared/upload.service.ts(41,7): error TS2345: Argument of type '(snapshot: UploadTaskSnapshot) => void' is not assignable to parameter of type 'Observer<any, any> | ((a: Object) => any) | null | undefined'.
Type '(snapshot: UploadTaskSnapshot) => void' is not assignable to type '(a: Object) => any'.
Types of parameters 'snapshot' and 'a' are incompatible.
Type 'Object' is not assignable to type 'UploadTaskSnapshot'.
The 'Object' type is assignable to very few other types. Did you mean to use the 'any' type instead?
Property 'bytesTransferred' is missing in type 'Object'.
src/app/uploads/shared/upload.service.ts(46,8): error TS7006: Parameter 'error' implicitly has an 'any' type.

error TS2339: Property 'uid' does not exist on type '{}

switchMap(user => {
        if (user) {
          return this.afs.doc<User>(`users/${user.uid}`).valueChanges();
        } else {
          return of(null);
        }
      })

This function in the auth.service.ts constructor, is giving the following error during compilation:

error TS2339: Property 'uid' does not exist on type '{}

Material design.

Hi there, this is not an issue but can you share a quick tutorial on youtube about how to pass firestarter from bulma css to material design? or any easy way to do so?

Thanks

Cant get access to Items!

cant get access to items.
running on my localhost:4200
clicking on Connect Anonymously but nothing happening?
please help.
Thanks.

Cannot read property 'length' of undefined

Cannot read property 'length' of undefined
TypeError: Cannot read property 'length' of undefined

Not working on windows

> ng serve --aot

** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
Date: 2017-12-28T18:41:03.992Z
Hash: de590bbfd9f3830769d5
Time: 3419ms
chunk {inline} inline.bundle.js (inline) 5.79 kB [entry] [rendered]
chunk {main} main.bundle.js (main) 2.93 kB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js (polyfills) 636 bytes [initial] [rendered]
chunk {styles} styles.bundle.js (styles) 41.3 kB [initial] [rendered]
chunk {vendor} vendor.bundle.js (vendor) 852 kB [initial] [rendered]

ERROR in TypeError: Cannot read property 'length' of undefined
    at createSourceFile (D:\dev\zor\angular\node_modules\typescript\lib\typescript.js:16640:109)
    at parseSourceFileWorker (D:\dev\zor\angular\node_modules\typescript\lib\typescript.js:16572:26)
    at Object.parseSourceFile (D:\dev\zor\angular\node_modules\typescript\lib\typescript.js:16521:26)
    at Object.createSourceFile (D:\dev\zor\angular\node_modules\typescript\lib\typescript.js:16371:29)
    at VirtualFileStats.getSourceFile (D:\dev\zor\angular\node_modules\@ngtools\webpack\src\compiler_host.js:67:35)
    at WebpackCompilerHost.getSourceFile (D:\dev\zor\angular\node_modules\@ngtools\webpack\src\compiler_host.js:207:38)
    at TsCompilerAotCompilerTypeCheckHostAdapter.getOriginalSourceFile (D:\dev\zor\angular\node_modules\@angular\compiler-cli\src\transformers\compiler_host.js:226:31)
    at TsCompilerAotCompilerTypeCheckHostAdapter.getSourceFile (D:\dev\zor\angular\node_modules\@angular\compiler-cli\src\transformers\compiler_host.js:318:23)
    at findSourceFile (D:\dev\zor\angular\node_modules\typescript\lib\typescript.js:70246:29)
    at processImportedModules (D:\dev\zor\angular\node_modules\typescript\lib\typescript.js:70393:25)
    at findSourceFile (D:\dev\zor\angular\node_modules\typescript\lib\typescript.js:70274:17)
    at processImportedModules (D:\dev\zor\angular\node_modules\typescript\lib\typescript.js:70393:25)
    at findSourceFile (D:\dev\zor\angular\node_modules\typescript\lib\typescript.js:70274:17)
    at args (D:\dev\zor\angular\node_modules\typescript\lib\typescript.js:70200:85)
    at getSourceFileFromReferenceWorker (D:\dev\zor\angular\node_modules\typescript\lib\typescript.js:70173:34)
    at processSourceFile (D:\dev\zor\angular\node_modules\typescript\lib\typescript.js:70200:13)

webpack: Failed to compile.

Any ideas?

File Upload

file upload is not workingfile upload is not working.

Cloud Firestore -> Rules -> allow read, write must be set to "true"

The github download has the following issue

When configuring Firebase, "Database", in the "Cloud Firestore" Dropdown, "Rules"
has read, write set to "false" and creates a 'Missing or insufficient permissions.' notification, unless set to "true"

service cloud.firestore {
match /databases/{database}/documents {
match /{document=**} {
allow read, write: if true;
}
}
}

Not working with latest updates

When i installed angularfire2 and firebase in package.json its not working

ERROR in C:/Users/mayank.dilip.kalbhor/Desktop/Apps/firestarter/src/app/core/auth.service.ts (2,10): Module '"C:/Users/mayank.dilip.kalbhor/Desktop/Apps/firestarter/node_modules/angularfire2/index"' has no exported member 'AngularFireAuth'.

ERROR in C:/Users/mayank.dilip.kalbhor/Desktop/Apps/firestarter/src/app/core/auth.service.ts (2,27): Module '"C:/Users/mayank.dilip.kalbhor/Desktop/Apps/firestarter/node_modules/angularfire2/index"' has no exported member 'AngularFireDatabase'.

ERROR in C:/Users/mayank.dilip.kalbhor/Desktop/Apps/firestarter/src/app/core/auth.service.ts (2,48): Module '"C:/Users/mayank.dilip.kalbhor/Desktop/Apps/firestarter/node_modules/angularfire2/index"' has no exported member 'FirebaseAuthState'.

ERROR in C:/Users/mayank.dilip.kalbhor/Desktop/Apps/firestarter/src/app/core/auth.service.ts (2,67): Module '"C:/Users/mayank.dilip.kalbhor/Desktop/Apps/firestarter/node_modules/angularfire2/index"' has no exported member 'AuthProviders'.

ERROR in C:/Users/mayank.dilip.kalbhor/Desktop/Apps/firestarter/src/app/core/auth.service.ts (2,82): Module '"C:/Users/mayank.dilip.kalbhor/Desktop/Apps/firestarter/node_modules/angularfire2/index"' has no exported member 'AuthMethods'.

ERROR in C:/Users/mayank.dilip.kalbhor/Desktop/Apps/firestarter/src/app/core/auth.service.ts (2,95): Module '"C:/Users/mayank.dilip.kalbhor/Desktop/Apps/firestarter/node_modules/angularfire2/index"' has no exported member 'AngularFire'.

ERROR in C:/Users/mayank.dilip.kalbhor/Desktop/Apps/firestarter/src/app/items/shared/item.service.ts (2,10): Module '"C:/Users/mayank.dilip.kalbhor/Desktop/Apps/firestarter/node_modules/angularfire2/index"' has no exported member 'AngularFire'.

Getting many errors. If i run as is after cloning i get the below:

ERROR in Error encountered resolving symbol values statically. Calling function 'OpaqueToken',

Not sure how to clone and run this starter kit

Google login from home screen failed

Problem:
After login with Google, a black page appears on the front. The firestarter app start screen is not visible.

reproduce:

• Go with google chrome to https://firestarter-96e46.firebaseapp.com/
• Add with google menu app to home screen
• Close chrome
• Open the firestarter app from home screen
• Connect with Google
• Choose account (attention, I have more than one google account, might make a difference)

Google seems to login, but the firestarter is not visible, a blank screen appears.

MD component not a known element

Bug, feature request, or proposal:

ERROR MESSAGE IN DEVELOPER TOOLS:

compiler.es5.js:1690 Uncaught Error: Template parse errors:
'md-panel-title' is not a known element:
1. If 'md-panel-title' is an Angular component, then verify that it is part of this module.
2. If 'md-panel-title' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" <md-expansion-panel (opened)="setStep(0)" hideToggle="true">
    <md-expansion-panel-header>
      [ERROR ->]<md-panel-title>
        Personal data
      </md-panel-title>
"): ng:///ItemModule/ItemDetailComponent.html@3:6

I've gotten this with countless md components and I cannot figure out why.

What is the expected behavior?

1. I've imported all MD components to my module.ts file in UI/shared/ui.module.ts which is imported to app.module.ts

2. I've added MD components to imports and exports of @NgModule({

3. I include proper markup in component html file. app/items/item-detail/item.detail.component.html

When I ng serve

I should see the md components rendered on the page like normal. I've had simple inputs and buttons working, but every time I add a new component from md it throws the mentioned error.

What are the steps to reproduce?

https://github.com/KevinMind/home-inventory-app-official

git clone
npm install
ng serve

to get it running. To make it run without error go to
app/items/item-details/item.detail.component.html

Migrate from SW-Precache to Angular Service Worker

Let's drop SW-Precache in favor of the Angular Service Worker. We need to (1) remove the existing worker config (2) add the Angular config detailed in Angular 5 PWA Basics

cannot bind 'upload' since it isn't a known property of 'upload-detail

Can't bind to 'upload' since it isn't a known property of 'upload-detail'.

1. If 'upload-detail' is an Angular component and it has 'upload' input, then verify that it is part of this module.
2. If 'upload-detail' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("

][upload]='upload'>

I have not changed anything in the upload components or service.
All I did was include the component in the component in order to display an upload form along with an item.

It breaks the app though at

div *ngFor="let upload of uploads | async">
<upload-detail [upload]='upload'>

[upload]="upload" is not being recognized for some reason.

REPO: https://github.com/KevinMind/home-inventory-app-official

ng build --prod

at Object.createSourceFile (D:\code\WebStormProjects\angular-firestarter\node_modules\typescript\lib\typescript.js:16371:29)
at VirtualFileStats.getSourceFile (D:\code\WebStormProjects\angular-firestarter\node_modules@ngtools\webpack\src\compiler_host.js:67:35)
at WebpackCompilerHost.getSourceFile (D:\code\WebStormProjects\angular-firestarter\node_modules@ngtools\webpack\src\compiler_host.js:207:38)
at TsCompilerAotCompilerTypeCheckHostAdapter.getOriginalSourceFile (D:\code\WebStormProjects\angular-firestarter\node_modules@angular\compiler-cli\src\transformers\compiler_host.js:226:31)
at TsCompilerAotCompilerTypeCheckHostAdapter.getSourceFile (D:\code\WebStormProjects\angular-firestarter\node_modules@angular\compiler-cli\src\transformers\compiler_host.js:318:23)
at findSourceFile (D:\code\WebStormProjects\angular-firestarter\node_modules\typescript\lib\typescript.js:70246:29)
at processImportedModules (D:\code\WebStormProjects\angular-firestarter\node_modules\typescript\lib\typescript.js:70393:25)
at findSourceFile (D:\code\WebStormProjects\angular-firestarter\node_modules\typescript\lib\typescript.js:70274:17)
at processImportedModules (D:\code\WebStormProjects\angular-firestarter\node_modules\typescript\lib\typescript.js:70393:25)
at findSourceFile (D:\code\WebStormProjects\angular-firestarter\node_modules\typescript\lib\typescript.js:70274:17)
at args (D:\code\WebStormProjects\angular-firestarter\node_modules\typescript\lib\typescript.js:70200:85)
at getSourceFileFromReferenceWorker (D:\code\WebStormProjects\angular-firestarter\node_modules\typescript\lib\typescript.js:70173:34)
at processSourceFile (D:\code\WebStormProjects\angular-firestarter\node_modules\typescript\lib\typescript.js:70200:13)

ERROR in TypeError: Cannot read property 'length' of undefined

Hello. Download your project and get this error ERROR in TypeError: Cannot read property 'length' of undefined . I can not start the project, I alone have such a problem?
Thank you !
Anton.

Solved: SW error TypeError

Solved.
i've downloaded files and followed the readme file.
when i run "ng serve" and console says this.

SW error TypeError: Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script.

<script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('/service-worker.js')
      .then((registration) => {
        console.log('SW registered');
      })
      .catch((err) => {
        console.log('SW error', err);
      });
    }
  </script>

cannot load @angular/material

I've tried following https://material.angular.io instructions. I get one of two errors:

1. app runs with ng serve but material components render as naked html elements.
   click me looks like a plane html button

2. the app does not load because "md component is not a known element in angular"

trying out from a fresh clone. Have you run into this before?

Top nav not responsive anymore when using latest Bulma version

Just started a blank CLI project. Made a top-nav component, copied everything in it from the firestarter...

Added bulma v0.6.2 cdn to index.html.

Menu is not getting collapsed.

Replaced with 0.4... Top nav works again.

I'm thinking of starting a project with bulma but now i'm not sure anymore.

Any comments?

Potential memory leaks in auth.service.ts

In the constructor, the authState is being subscribed in order to update the local authState variable:

constructor(private afAuth: AngularFireAuth,
        private db: AngularFireDatabase,
        private router:Router) {

        this.afAuth.authState.subscribe((auth) => {
        this.authState = auth
    });
}

I think there should be a unsubscription somewhere in the code for unhooking the authState so that every time auth.service gets injected it won't cause potential memory leaks.
Potential solution:

authSubs = this.afAuth.authState.subscribe((auth) => {
    this.authState = auth
});

ngOnDestroy() {
    this.authSubs.unsubscribe();
}

service-worker.js missing

Hello,

I got following error message because the service-worker.js is missing.
Could please tell us the purpose of this script ?

SW error TypeError: Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script.

Thanks

How to update the name of item?

The live demo - service worker error

That's what I see in the console:

/service-worker.js Failed to load resource: net::ERR_INSECURE_RESPONSE
(index):41 SW error DOMException: Failed to register a ServiceWorker: The script has an unsupported MIME type ('text/html').
core.es5.js:2925 Angular is running in the development mode. Call enableProdMode() to enable the production mode.```

Refactor Notifications to a UI Component

Currently, the notification is living directly in the app component. It should be refactored as a component in the UI module, named something like notification-message, then exported for use in the app component.

https://github.com/codediodeio/angular-firestarter/blob/master/src/app/app.component.html#L14-L24

Google Login Prematurely Closes

I had an issue with the Google OAUTH modal disappearing after attempting to log in. Fixed it by white listing the development and production domains in the Firebase Console (under the Authentication/Sign-in Method/ tab, Authorized Domains.

Loading message should be inside the app-root tags

Keeping it outside means it will be appended to the page, inside the app-root tags it'll be replaced.

Firebase hosting - prerender routes with route params

I'm not completely clear on how to get the prerender functionality working for routes that use route params to fetch the component data from an api.

My route is currenlty set like this in my routing module

{ path: 'episode/:episodeId', component: EpisodeComponent }

I've followed the instructions from this tutorial but it does not mention anything about using route params on components.
https://angularfirebase.com/lessons/angular-6-universal-ssr-prerendering-firebase-hosting/