angularfire: Error with "ng build && ng serve" following "Installation and Setup" guide

I followed the steps from the installation guide but I receive the below errors:

Build error
The Broccoli Plugin: [BroccoliTypeScriptCompiler] failed with:
SyntaxError: Unexpected token ]
    at Object.parse (native)
    at BroccoliTypeScriptCompiler._loadTsConfig (C:\Users\Marian\Desktop\ng_cli\test_cli_fire\node_modules\angular-cli\lib\broccoli\broccoli-typescript.js:128:25)
    at BroccoliTypeScriptCompiler._createServiceHost (C:\Users\Marian\Desktop\ng_cli\test_cli_fire\node_modules\angular-cli\lib\broccoli\broccoli-typescript.js:163:25)
    at BroccoliTypeScriptCompiler.build (C:\Users\Marian\Desktop\ng_cli\test_cli_fire\node_modules\angular-cli\lib\broccoli\broccoli-typescript.js:41:12)
    at C:\Users\Marian\Desktop\ng_cli\test_cli_fire\node_modules\angular-cli\node_modules\broccoli-caching-writer\index.js:152:21
    at lib$rsvp$$internal$$tryCatch (C:\Users\Marian\Desktop\ng_cli\test_cli_fire\node_modules\angular-cli\node_modules\rsvp\dist\rsvp.js:1036:16)
    at lib$rsvp$$internal$$invokeCallback (C:\Users\Marian\Desktop\ng_cli\test_cli_fire\node_modules\angular-cli\node_modules\rsvp\dist\rsvp.js:1048:17)
    at lib$rsvp$$internal$$publish (C:\Users\Marian\Desktop\ng_cli\test_cli_fire\node_modules\angular-cli\node_modules\rsvp\dist\rsvp.js:1019:11)
    at lib$rsvp$asap$$flush (C:\Users\Marian\Desktop\ng_cli\test_cli_fire\node_modules\angular-cli\node_modules\rsvp\dist\rsvp.js:1198:9)
    at nextTickCallbackWith0Args (node.js:420:9)
    at process._tickCallback (node.js:349:13)

The broccoli plugin was instantiated at: 
    at BroccoliTypeScriptCompiler.Plugin (C:\Users\Marian\Desktop\ng_cli\test_cli_fire\node_modules\angular-cli\node_modules\broccoli-plugin\index.js:10:31)
    at BroccoliTypeScriptCompiler.CachingWriter [as constructor] (C:\Users\Marian\Desktop\ng_cli\test_cli_fire\node_modules\angular-cli\node_modules\broccoli-caching-writer\index.js:21:10)
    at BroccoliTypeScriptCompiler (C:\Users\Marian\Desktop\ng_cli\test_cli_fire\node_modules\angular-cli\lib\broccoli\broccoli-typescript.js:27:10)
    at Angular2App._getTsTree (C:\Users\Marian\Desktop\ng_cli\test_cli_fire\node_modules\angular-cli\lib\broccoli\angular2-app.js:331:18)
    at Angular2App._buildTree (C:\Users\Marian\Desktop\ng_cli\test_cli_fire\node_modules\angular-cli\lib\broccoli\angular2-app.js:124:23)
    at new Angular2App (C:\Users\Marian\Desktop\ng_cli\test_cli_fire\node_modules\angular-cli\lib\broccoli\angular2-app.js:53:23)
    at module.exports (C:\Users\Marian\Desktop\ng_cli\test_cli_fire\angular-cli-build.js:10:10)
    at Class.module.exports.Task.extend.setupBroccoliBuilder (C:\Users\Marian\Desktop\ng_cli\test_cli_fire\node_modules\angular-cli\node_modules\ember-cli\lib\models\builder.js:55:19)
    at Class.module.exports.Task.extend.init (C:\Users\Marian\Desktop\ng_cli\test_cli_fire\node_modules\angular-cli\node_modules\ember-cli\lib\models\builder.js:89:10)
    at new Class (C:\Users\Marian\Desktop\ng_cli\test_cli_fire\node_modules\angular-cli\node_modules\core-object\core-object.js:18:12)
    at Class.module.exports.Task.extend.run (C:\Users\Marian\Desktop\ng_cli\test_cli_fire\node_modules\angular-cli\node_modules\ember-cli\lib\tasks\serve.js:15:19)
    at C:\Users\Marian\Desktop\ng_cli\test_cli_fire\node_modules\angular-cli\node_modules\ember-cli\lib\commands\serve.js:64:24
    at lib$rsvp$$internal$$tryCatch (C:\Users\Marian\Desktop\ng_cli\test_cli_fire\node_modules\angular-cli\node_modules\rsvp\dist\rsvp.js:1036:16)
    at lib$rsvp$$internal$$invokeCallback (C:\Users\Marian\Desktop\ng_cli\test_cli_fire\node_modules\angular-cli\node_modules\rsvp\dist\rsvp.js:1048:17)
    at lib$rsvp$$internal$$publish (C:\Users\Marian\Desktop\ng_cli\test_cli_fire\node_modules\angular-cli\node_modules\rsvp\dist\rsvp.js:1019:11)
    at lib$rsvp$asap$$flush (C:\Users\Marian\Desktop\ng_cli\test_cli_fire\node_modules\angular-cli\node_modules\rsvp\dist\rsvp.js:1198:9)

Files:

src\main.ts

import { BrowserModule } from '@angular/platform-browser';
import { enableProdMode, NgModule } from '@angular/core';
import { <MyApp>, environment } from './app/';
import { AngularFireModule } from '/angularfire2';

const firebaseConfig = {
  apiKey: "AIzaSyBofqdUZR8WLKdPsqryQtF1lFxNAdk6JEI",
  authDomain: "vital-contact-116013.firebaseapp.com",
  databaseURL: "https://vital-contact-116013.firebaseio.com",
  storageBucket: "<your-storage-bucket>"
}

@NgModule({
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(firebaseConfig)
  ],
  declarations: [ MyComponent ],
  Bootstrap: [ MyComponent ]
})
export class MyAppModule {}

src\app\app.component.ts

import { Component } from '@angular/core';
import { AngularFire, FirebaseListObservable } from 'angularfire2';

@Component({
  moduleId: module.id,
  selector: '<my-app>-app',
  templateUrl: '<my-app>.component.html',
  styleUrls: ['<my-app>.component.css']
})
export class <MyApp>Component {
  items: FirebaseListObservable<any[]>;
  constructor(af: AngularFire) {
    this.items = af.database.list('items');
  }
}

src\tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "mapRoot": "/",
    "module": "commonjs",
    "moduleResolution": "node",
    "noEmitOnError": true,
    "noImplicitAny": false,
    "outDir": "../dist/",
    "rootDir": ".",
    "sourceMap": true,
    "target": "es5",
    "inlineSources": true
  },

  "files": [
    "main.ts",
    "typings.d.ts",
    "node_modules/angularfire2/firebase3.d.ts",
  ]
}

typings.json

{
  "globalDevDependencies": {
    "angular-protractor": "registry:dt/angular-protractor#1.5.0+20160425143459",
    "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
    "selenium-webdriver": "registry:dt/selenium-webdriver#2.44.0+20160317120654"
  },
  "globalDependencies": {
    "es6-shim": "registry:dt/es6-shim#0.31.2+20160602141504",
    "firebase3": "file:node_modules/angularfire2/firebase3.d.ts"
  },
  "dependencies": {
    "es6-promise": "registry:npm/es6-promise#3.0.0+20160723033700"
  }
}

I also tried the path shown here: https://www.youtube.com/watch?v=8E-dueHCd2o but without success

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Comments: 38 (10 by maintainers)

Commits related to this issue

Most upvoted comments

Hi @dmastag, I tried the following steps in my machine running os: win32 x64, node: 4.4.7 for using Angular Fire beta4 version. And these steps were successful. 1. Installing Angular-cli fresh: https://github.com/angular/angular-cli/blob/master/WEBPACK_UPDATE.md npm unlink angular-cli npm rm -g angular-cli npm cache clean npm install --global angular-cli@webpack ->[1.0.0-beta.11-webpack.2] ng new projectName

2. Installing AngularFire Beta 4: npm install firebase angularfire2@next --save In package.json change 2.0.0-beta.3-pre2 to 2.0.0-beta.4 And run npm install again

3.In App.module.ts file import {AngularFireModule} from ‘angularfire2’; import * as firebase from ‘firebase’; const firebaseConfig = { apiKey: “YourKey”, authDomain: “YourDomain”, databaseURL: “YourURL”, storageBucket: “Your Bucket” } Inside NgModule Imports section, add-> AngularFireModule.initializeApp(firebaseConfig)

4. In App.component.ts import { AngularFire, FirebaseListObservable } from ‘angularfire2’; Inside AppComponent section, add-> items: FirebaseListObservable any[];//add brackets constructor(af: AngularFire) { this.items = af.database.list(‘/items’); } 5. Log into Firebase console Change the rules to read Add some sample data under items.

6. In App.component.html

ul li class=“text” *ngFor=“let item of items | async” {{item.$value}} /li /ul

7. command line npm install -g firebase-tools Firebase init, Select the firebase project created in the Firebase console Create a database rules json file, press enter Public directory is dist Configure as a single page app - N dist/index.html overwrite - N delete dist folder ng build Firebase serve. Firebase deploy -m “comments" Firebase open

It works for me when I added the “firebase” on “types” section of tsconfig.json

"types": [
   "jasmine",
   "firebase"
]

Do not need to upgrade to typescript@2.0.0, I’m using 1.8.10.

Is this a good solution?

Thanks!

I have the same error.

With webpack it’s more simple to install, but unfortunately I still receive some errors.
image Argument of type '{ imports: (typeof BrowserModule | ModuleWithProviders)[]; declarations: typeof AppComponent[]; B...' is not assignable to parameter of type 'NgModuleMetadataType'.at line 24 col 3
image client:47 [WDS] Errors while compiling. client:49 [default] C:\Users\Marian\Desktop\ng_cli\ng_fire_webpack\node_modules\angularfire2\angularfire2.d.ts:13:65 Cannot find namespace 'firebase'.errors @ client:49sock.onmessage @ client:83EventTarget.dispatchEvent @ eventtarget.js:51(anonymous function) @ main.js:274SockJS._transportMessage @ main.js:272EventEmitter.emit @ emitter.js:50WebSocketTransport.ws.onmessage @ websocket.js:35wrapFn @ zone.js:769ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423 client:49 [default] C:\Users\Marian\Desktop\ng_cli\ng_fire_webpack\node_modules\angularfire2\angularfire2.d.ts:15:45 Cannot find namespace 'firebase'.errors @ client:49sock.onmessage @ client:83EventTarget.dispatchEvent @ eventtarget.js:51(anonymous function) @ main.js:274SockJS._transportMessage @ main.js:272EventEmitter.emit @ emitter.js:50WebSocketTransport.ws.onmessage @ websocket.js:35wrapFn @ zone.js:769ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423 client:49 [default] C:\Users\Marian\Desktop\ng_cli\ng_fire_webpack\node_modules\angularfire2\auth\auth.d.ts:14:39 Cannot find namespace 'firebase'.errors @ client:49sock.onmessage @ client:83EventTarget.dispatchEvent @ eventtarget.js:51(anonymous function) @ main.js:274SockJS._transportMessage @ main.js:272EventEmitter.emit @ emitter.js:50WebSocketTransport.ws.onmessage @ websocket.js:35wrapFn @ zone.js:769ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423 client:49 [default] C:\Users\Marian\Desktop\ng_cli\ng_fire_webpack\node_modules\angularfire2\auth\auth.d.ts:15:51 Cannot find namespace 'firebase'.errors @ client:49sock.onmessage @ client:83EventTarget.dispatchEvent @ eventtarget.js:51(anonymous function) @ main.js:274SockJS._transportMessage @ main.js:272EventEmitter.emit @ emitter.js:50WebSocketTransport.ws.onmessage @ websocket.js:35wrapFn @ zone.js:769ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423 client:49 [default] C:\Users\Marian\Desktop\ng_cli\ng_fire_webpack\node_modules\angularfire2\auth\auth.d.ts:15:91 Cannot find namespace 'firebase'.errors @ client:49sock.onmessage @ client:83EventTarget.dispatchEvent @ eventtarget.js:51(anonymous function) @ main.js:274SockJS._transportMessage @ main.js:272EventEmitter.emit @ emitter.js:50WebSocketTransport.ws.onmessage @ websocket.js:35wrapFn @ zone.js:769ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423 client:49 [default] C:\Users\Marian\Desktop\ng_cli\ng_fire_webpack\node_modules\angularfire2\auth\auth.d.ts:16:50 Cannot find namespace 'firebase'.errors @ client:49sock.onmessage @ client:83EventTarget.dispatchEvent @ eventtarget.js:51(anonymous function) @ main.js:274SockJS._transportMessage @ main.js:272EventEmitter.emit @ emitter.js:50WebSocketTransport.ws.onmessage @ websocket.js:35wrapFn @ zone.js:769ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423 client:49 [default] C:\Users\Marian\Desktop\ng_cli\ng_fire_webpack\node_modules\angularfire2\auth\auth.d.ts:16:118 Cannot find namespace 'firebase'.errors @ client:49sock.onmessage @ client:83EventTarget.dispatchEvent @ eventtarget.js:51(anonymous function) @ main.js:274SockJS._transportMessage @ main.js:272EventEmitter.emit @ emitter.js:50WebSocketTransport.ws.onmessage @ websocket.js:35wrapFn @ zone.js:769ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423 client:49 [default] C:\Users\Marian\Desktop\ng_cli\ng_fire_webpack\node_modules\angularfire2\auth\auth.d.ts:19:55 Cannot find namespace 'firebase'.errors @ client:49sock.onmessage @ client:83EventTarget.dispatchEvent @ eventtarget.js:51(anonymous function) @ main.js:274SockJS._transportMessage @ main.js:272EventEmitter.emit @ emitter.js:50WebSocketTransport.ws.onmessage @ websocket.js:35wrapFn @ zone.js:769ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423 client:49 [default] C:\Users\Marian\Desktop\ng_cli\ng_fire_webpack\node_modules\angularfire2\auth\auth_backend.d.ts:6:81 Cannot find namespace 'firebase'.errors @ client:49sock.onmessage @ client:83EventTarget.dispatchEvent @ eventtarget.js:51(anonymous function) @ main.js:274SockJS._transportMessage @ main.js:272EventEmitter.emit @ emitter.js:50WebSocketTransport.ws.onmessage @ websocket.js:35wrapFn @ zone.js:769ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423 client:49 [default] C:\Users\Marian\Desktop\ng_cli\ng_fire_webpack\node_modules\angularfire2\auth\auth_backend.d.ts:8:48 Cannot find namespace 'firebase'.errors @ client:49sock.onmessage @ client:83EventTarget.dispatchEvent @ eventtarget.js:51(anonymous function) @ main.js:274SockJS._transportMessage @ main.js:272EventEmitter.emit @ emitter.js:50WebSocketTransport.ws.onmessage @ websocket.js:35wrapFn @ zone.js:769ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423 client:49 [default] C:\Users\Marian\Desktop\ng_cli\ng_fire_webpack\node_modules\angularfire2\auth\auth_backend.d.ts:13:45 Cannot find namespace 'firebase'.errors @ client:49sock.onmessage @ client:83EventTarget.dispatchEvent @ eventtarget.js:51(anonymous function) @ main.js:274SockJS._transportMessage @ main.js:272EventEmitter.emit @ emitter.js:50WebSocketTransport.ws.onmessage @ websocket.js:35wrapFn @ zone.js:769ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423 client:49 [default] C:\Users\Marian\Desktop\ng_cli\ng_fire_webpack\node_modules\angularfire2\auth\auth_backend.d.ts:39:10 Cannot find namespace 'firebase'.errors @ client:49sock.onmessage @ client:83EventTarget.dispatchEvent @ eventtarget.js:51(anonymous function) @ main.js:274SockJS._transportMessage @ main.js:272EventEmitter.emit @ emitter.js:50WebSocketTransport.ws.onmessage @ websocket.js:35wrapFn @ zone.js:769ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423 client:49 [default] C:\Users\Marian\Desktop\ng_cli\ng_fire_webpack\node_modules\angularfire2\auth\auth_backend.d.ts:41:13 Cannot find namespace 'firebase'.errors @ client:49sock.onmessage @ client:83EventTarget.dispatchEvent @ eventtarget.js:51(anonymous function) @ main.js:274SockJS._transportMessage @ main.js:272EventEmitter.emit @ emitter.js:50WebSocketTransport.ws.onmessage @ websocket.js:35wrapFn @ zone.js:769ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423 client:49 [default] C:\Users\Marian\Desktop\ng_cli\ng_fire_webpack\node_modules\angularfire2\auth\auth_backend.d.ts:42:13 Cannot find namespace 'firebase'.errors @ client:49sock.onmessage @ client:83EventTarget.dispatchEvent @ eventtarget.js:51(anonymous function) @ main.js:274SockJS._transportMessage @ main.js:272EventEmitter.emit @ emitter.js:50WebSocketTransport.ws.onmessage @ websocket.js:35wrapFn @ zone.js:769ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423 client:49 [default] C:\Users\Marian\Desktop\ng_cli\ng_fire_webpack\node_modules\angularfire2\auth\auth_backend.d.ts:43:14 Cannot find namespace 'firebase'.errors @ client:49sock.onmessage @ client:83EventTarget.dispatchEvent @ eventtarget.js:51(anonymous function) @ main.js:274SockJS._transportMessage @ main.js:272EventEmitter.emit @ emitter.js:50WebSocketTransport.ws.onmessage @ websocket.js:35wrapFn @ zone.js:769ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423 client:49 [default] C:\Users\Marian\Desktop\ng_cli\ng_fire_webpack\node_modules\angularfire2\auth\auth_backend.d.ts:44:15 Cannot find namespace 'firebase'.errors @ client:49sock.onmessage @ client:83EventTarget.dispatchEvent @ eventtarget.js:51(anonymous function) @ main.js:274SockJS._transportMessage @ main.js:272EventEmitter.emit @ emitter.js:50WebSocketTransport.ws.onmessage @ websocket.js:35wrapFn @ zone.js:769ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423 client:49 [default] C:\Users\Marian\Desktop\ng_cli\ng_fire_webpack\node_modules\angularfire2\auth\auth_backend.d.ts:47:54 Cannot find namespace 'firebase'.errors @ client:49sock.onmessage @ client:83EventTarget.dispatchEvent @ eventtarget.js:51(anonymous function) @ main.js:274SockJS._transportMessage @ main.js:272EventEmitter.emit @ emitter.js:50WebSocketTransport.ws.onmessage @ websocket.js:35wrapFn @ zone.js:769ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423 client:49 [default] C:\Users\Marian\Desktop\ng_cli\ng_fire_webpack\node_modules\angularfire2\auth\auth_backend.d.ts:47:84 Cannot find namespace 'firebase'.errors @ client:49sock.onmessage @ client:83EventTarget.dispatchEvent @ eventtarget.js:51(anonymous function) @ main.js:274SockJS._transportMessage @ main.js:272EventEmitter.emit @ emitter.js:50WebSocketTransport.ws.onmessage @ websocket.js:35wrapFn @ zone.js:769ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423 client:49 [default] C:\Users\Marian\Desktop\ng_cli\ng_fire_webpack\node_modules\angularfire2\auth\firebase_sdk_auth_backend.d.ts:8:13 Cannot find namespace 'firebase'.errors @ client:49sock.onmessage @ client:83EventTarget.dispatchEvent @ eventtarget.js:51(anonymous function) @ main.js:274SockJS._transportMessage @ main.js:272EventEmitter.emit @ emitter.js:50WebSocketTransport.ws.onmessage @ websocket.js:35wrapFn @ zone.js:769ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423 client:49 [default] C:\Users\Marian\Desktop\ng_cli\ng_fire_webpack\node_modules\angularfire2\auth\firebase_sdk_auth_backend.d.ts:9:24 Cannot find namespace 'firebase'.errors @ client:49sock.onmessage @ client:83EventTarget.dispatchEvent @ eventtarget.js:51(anonymous function) @ main.js:274SockJS._transportMessage @ main.js:272EventEmitter.emit @ emitter.js:50WebSocketTransport.ws.onmessage @ websocket.js:35wrapFn @ zone.js:769ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423 client:49 [default] C:\Users\Marian\Desktop\ng_cli\ng_fire_webpack\node_modules\angularfire2\auth\firebase_sdk_auth_backend.d.ts:17:72 Cannot find namespace 'firebase'.errors @ client:49sock.onmessage @ client:83EventTarget.dispatchEvent @ eventtarget.js:51(anonymous function) @ main.js:274SockJS._transportMessage @ main.js:272EventEmitter.emit @ emitter.js:50WebSocketTransport.ws.onmessage @ websocket.js:35wrapFn @ zone.js:769ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423 client:49 [default] C:\Users\Marian\Desktop\ng_cli\ng_fire_webpack\node_modules\angularfire2\auth\firebase_sdk_auth_backend.d.ts:19:35 Cannot find namespace 'firebase'.errors @ client:49sock.onmessage @ client:83EventTarget.dispatchEvent @ eventtarget.js:51(anonymous function) @ main.js:274SockJS._transportMessage @ main.js:272EventEmitter.emit @ emitter.js:50WebSocketTransport.ws.onmessage @ websocket.js:35wrapFn @ zone.js:769ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423 client:49 [default] C:\Users\Marian\Desktop\ng_cli\ng_fire_webpack\node_modules\angularfire2\auth\firebase_sdk_auth_backend.d.ts:20:36 Cannot find namespace 'firebase'.errors @ client:49sock.onmessage @ client:83EventTarget.dispatchEvent @ eventtarget.js:51(anonymous function) @ main.js:274SockJS._transportMessage @ main.js:272EventEmitter.emit @ emitter.js:50WebSocketTransport.ws.onmessage @ websocket.js:35wrapFn @ zone.js:769ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423 client:49 [default] C:\Users\Marian\Desktop\ng_cli\ng_fire_webpack\node_modules\angularfire2\database\database.d.ts:8:28 Cannot find namespace 'firebase'.errors @ client:49sock.onmessage @ client:83EventTarget.dispatchEvent @ eventtarget.js:51(anonymous function) @ main.js:274SockJS._transportMessage @ main.js:272EventEmitter.emit @ emitter.js:50WebSocketTransport.ws.onmessage @ websocket.js:35wrapFn @ zone.js:769ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423 client:49 [default] C:\Users\Marian\Desktop\ng_cli\ng_fire_webpack\node_modules\angularfire2\database\database.d.ts:9:30 Cannot find namespace 'firebase'.errors @ client:49sock.onmessage @ client:83EventTarget.dispatchEvent @ eventtarget.js:51(anonymous function) @ main.js:274SockJS._transportMessage @ main.js:272EventEmitter.emit @ emitter.js:50WebSocketTransport.ws.onmessage @ websocket.js:35wrapFn @ zone.js:769ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423 client:49 [default] C:\Users\Marian\Desktop\ng_cli\ng_fire_webpack\node_modules\angularfire2\database\firebase_list_factory.d.ts:5:73 Cannot find namespace 'firebase'.errors @ client:49sock.onmessage @ client:83EventTarget.dispatchEvent @ eventtarget.js:51(anonymous function) @ main.js:274SockJS._transportMessage @ main.js:272EventEmitter.emit @ emitter.js:50WebSocketTransport.ws.onmessage @ websocket.js:35wrapFn @ zone.js:769ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423 client:49 [default] C:\Users\Marian\Desktop\ng_cli\ng_fire_webpack\node_modules\angularfire2\database\firebase_list_factory.d.ts:5:103 Cannot find namespace 'firebase'.errors @ client:49sock.onmessage @ client:83EventTarget.dispatchEvent @ eventtarget.js:51(anonymous function) @ main.js:274SockJS._transportMessage @ main.js:272EventEmitter.emit @ emitter.js:50WebSocketTransport.ws.onmessage @ websocket.js:35wrapFn @ zone.js:769ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423 client:49 [default] C:\Users\Marian\Desktop\ng_cli\ng_fire_webpack\node_modules\angularfire2\database\firebase_list_observable.d.ts:6:49 Cannot find namespace 'firebase'.errors @ client:49sock.onmessage @ client:83EventTarget.dispatchEvent @ eventtarget.js:51(anonymous function) @ main.js:274SockJS._transportMessage @ main.js:272EventEmitter.emit @ emitter.js:50WebSocketTransport.ws.onmessage @ websocket.js:35wrapFn @ zone.js:769ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423 client:49 [default] C:\Users\Marian\Desktop\ng_cli\ng_fire_webpack\node_modules\angularfire2\database\firebase_list_observable.d.ts:6:79 Cannot find namespace 'firebase'.errors @ client:49sock.onmessage @ client:83EventTarget.dispatchEvent @ eventtarget.js:51(anonymous function) @ main.js:274SockJS._transportMessage @ main.js:272EventEmitter.emit @ emitter.js:50WebSocketTransport.ws.onmessage @ websocket.js:35wrapFn @ zone.js:769ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423 client:49 [default] C:\Users\Marian\Desktop\ng_cli\ng_fire_webpack\node_modules\angularfire2\database\firebase_list_observable.d.ts:8:10 Cannot find namespace 'firebase'.errors @ client:49sock.onmessage @ client:83EventTarget.dispatchEvent @ eventtarget.js:51(anonymous function) @ main.js:274SockJS._transportMessage @ main.js:272EventEmitter.emit @ emitter.js:50WebSocketTransport.ws.onmessage @ websocket.js:35wrapFn @ zone.js:769ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423 client:49 [default] C:\Users\Marian\Desktop\ng_cli\ng_fire_webpack\node_modules\angularfire2\database\firebase_list_observable.d.ts:8:40 Cannot find namespace 'firebase'.errors @ client:49sock.onmessage @ client:83EventTarget.dispatchEvent @ eventtarget.js:51(anonymous function) @ main.js:274SockJS._transportMessage @ main.js:272EventEmitter.emit @ emitter.js:50WebSocketTransport.ws.onmessage @ websocket.js:35wrapFn @ zone.js:769ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423 client:49 [default] C:\Users\Marian\Desktop\ng_cli\ng_fire_webpack\node_modules\angularfire2\database\firebase_list_observable.d.ts:9:22 Cannot find namespace 'firebase'.errors @ client:49sock.onmessage @ client:83EventTarget.dispatchEvent @ eventtarget.js:51(anonymous function) @ main.js:274SockJS._transportMessage @ main.js:272EventEmitter.emit @ emitter.js:50WebSocketTransport.ws.onmessage @ websocket.js:35wrapFn @ zone.js:769ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423 client:49 [default] C:\Users\Marian\Desktop\ng_cli\ng_fire_webpack\node_modules\angularfire2\database\firebase_list_observable.d.ts:9:52 Cannot find namespace 'firebase'.errors @ client:49sock.onmessage @ client:83EventTarget.dispatchEvent @ eventtarget.js:51(anonymous function) @ main.js:274SockJS._transportMessage @ main.js:272EventEmitter.emit @ emitter.js:50WebSocketTransport.ws.onmessage @ websocket.js:35wrapFn @ zone.js:769ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423 client:49 [default] C:\Users\Marian\Desktop\ng_cli\ng_fire_webpack\node_modules\angularfire2\database\firebase_list_observable.d.ts:11:20 Cannot find namespace 'firebase'.errors @ client:49sock.onmessage @ client:83EventTarget.dispatchEvent @ eventtarget.js:51(anonymous function) @ main.js:274SockJS._transportMessage @ main.js:272EventEmitter.emit @ emitter.js:50WebSocketTransport.ws.onmessage @ websocket.js:35wrapFn @ zone.js:769ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423 client:49 [default] C:\Users\Marian\Desktop\ng_cli\ng_fire_webpack\node_modules\angularfire2\database\firebase_list_observable.d.ts:12:52 Cannot find namespace 'firebase'.errors @ client:49sock.onmessage @ client:83EventTarget.dispatchEvent @ eventtarget.js:51(anonymous function) @ main.js:274SockJS._transportMessage @ main.js:272EventEmitter.emit @ emitter.js:50WebSocketTransport.ws.onmessage @ websocket.js:35wrapFn @ zone.js:769ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423 client:49 [default] C:\Users\Marian\Desktop\ng_cli\ng_fire_webpack\node_modules\angularfire2\database\firebase_list_observable.d.ts:13:38 Cannot find namespace 'firebase'.errors @ client:49sock.onmessage @ client:83EventTarget.dispatchEvent @ eventtarget.js:51(anonymous function) @ main.js:274SockJS._transportMessage @ main.js:272EventEmitter.emit @ emitter.js:50WebSocketTransport.ws.onmessage @ websocket.js:35wrapFn @ zone.js:769ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423 client:49 [default] C:\Users\Marian\Desktop\ng_cli\ng_fire_webpack\node_modules\angularfire2\database\firebase_list_observable.d.ts:14:82 Cannot find namespace 'firebase'.errors @ client:49sock.onmessage @ client:83EventTarget.dispatchEvent @ eventtarget.js:51(anonymous function) @ main.js:274SockJS._transportMessage @ main.js:272EventEmitter.emit @ emitter.js:50WebSocketTransport.ws.onmessage @ websocket.js:35wrapFn @ zone.js:769ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423 client:49 [default] C:\Users\Marian\Desktop\ng_cli\ng_fire_webpack\node_modules\angularfire2\database\firebase_object_factory.d.ts:4:75 Cannot find namespace 'firebase'.errors @ client:49sock.onmessage @ client:83EventTarget.dispatchEvent @ eventtarget.js:51(anonymous function) @ main.js:274SockJS._transportMessage @ main.js:272EventEmitter.emit @ emitter.js:50WebSocketTransport.ws.onmessage @ websocket.js:35wrapFn @ zone.js:769ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423 client:49 [default] C:\Users\Marian\Desktop\ng_cli\ng_fire_webpack\node_modules\angularfire2\database\firebase_object_observable.d.ts:7:101 Cannot find namespace 'firebase'.errors @ client:49sock.onmessage @ client:83EventTarget.dispatchEvent @ eventtarget.js:51(anonymous function) @ main.js:274SockJS._transportMessage @ main.js:272EventEmitter.emit @ emitter.js:50WebSocketTransport.ws.onmessage @ websocket.js:35wrapFn @ zone.js:769ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423 client:49 [default] C:\Users\Marian\Desktop\ng_cli\ng_fire_webpack\node_modules\angularfire2\database\firebase_object_observable.d.ts:9:21 Cannot find namespace 'firebase'.errors @ client:49sock.onmessage @ client:83EventTarget.dispatchEvent @ eventtarget.js:51(anonymous function) @ main.js:274SockJS._transportMessage @ main.js:272EventEmitter.emit @ emitter.js:50WebSocketTransport.ws.onmessage @ websocket.js:35wrapFn @ zone.js:769ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423 client:49 [default] C:\Users\Marian\Desktop\ng_cli\ng_fire_webpack\node_modules\angularfire2\database\firebase_object_observable.d.ts:10:27 Cannot find namespace 'firebase'.errors @ client:49sock.onmessage @ client:83EventTarget.dispatchEvent @ eventtarget.js:51(anonymous function) @ main.js:274SockJS._transportMessage @ main.js:272EventEmitter.emit @ emitter.js:50WebSocketTransport.ws.onmessage @ websocket.js:35wrapFn @ zone.js:769ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423 client:49 [default] C:\Users\Marian\Desktop\ng_cli\ng_fire_webpack\node_modules\angularfire2\database\firebase_object_observable.d.ts:11:14 Cannot find namespace 'firebase'.errors @ client:49sock.onmessage @ client:83EventTarget.dispatchEvent @ eventtarget.js:51(anonymous function) @ main.js:274SockJS._transportMessage @ main.js:272EventEmitter.emit @ emitter.js:50WebSocketTransport.ws.onmessage @ websocket.js:35wrapFn @ zone.js:769ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423 client:49 [default] C:\Users\Marian\Desktop\ng_cli\ng_fire_webpack\node_modules\angularfire2\interfaces.d.ts:9:22 Cannot find namespace 'firebase'.errors @ client:49sock.onmessage @ client:83EventTarget.dispatchEvent @ eventtarget.js:51(anonymous function) @ main.js:274SockJS._transportMessage @ main.js:272EventEmitter.emit @ emitter.js:50WebSocketTransport.ws.onmessage @ websocket.js:35wrapFn @ zone.js:769ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423 client:49 [default] C:\Users\Marian\Desktop\ng_cli\ng_fire_webpack\node_modules\angularfire2\interfaces.d.ts:10:25 Cannot find namespace 'firebase'.errors @ client:49sock.onmessage @ client:83EventTarget.dispatchEvent @ eventtarget.js:51(anonymous function) @ main.js:274SockJS._transportMessage @ main.js:272EventEmitter.emit @ emitter.js:50WebSocketTransport.ws.onmessage @ websocket.js:35wrapFn @ zone.js:769ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423 client:49 [default] C:\Users\Marian\Desktop\ng_cli\ng_fire_webpack\node_modules\angularfire2\interfaces.d.ts:11:25 Cannot find namespace 'firebase'.errors @ client:49sock.onmessage @ client:83EventTarget.dispatchEvent @ eventtarget.js:51(anonymous function) @ main.js:274SockJS._transportMessage @ main.js:272EventEmitter.emit @ emitter.js:50WebSocketTransport.ws.onmessage @ websocket.js:35wrapFn @ zone.js:769ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423 client:49 [default] C:\Users\Marian\Desktop\ng_cli\ng_fire_webpack\node_modules\angularfire2\interfaces.d.ts:12:34 Cannot find namespace 'firebase'.errors @ client:49sock.onmessage @ client:83EventTarget.dispatchEvent @ eventtarget.js:51(anonymous function) @ main.js:274SockJS._transportMessage @ main.js:272EventEmitter.emit @ emitter.js:50WebSocketTransport.ws.onmessage @ websocket.js:35wrapFn @ zone.js:769ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423 client:49 [default] C:\Users\Marian\Desktop\ng_cli\ng_fire_webpack\src\main.ts:24:2 Argument of type '{ imports: (typeof BrowserModule | ModuleWithProviders)[]; declarations: typeof AppComponent[]; B...' is not assignable to parameter of type 'NgModuleMetadataType'. Object literal may only specify known properties, and 'Bootstrap' does not exist in type 'NgModuleMetadataType'.

I created a repository: https://github.com/sorcamarian/angularfire2-instalation-webpack-fixed-errors

Thank you all!

@gmanojisaac, your instructions were the most appropriate for me.(without point 7)

Thank-you for your prompt response. I am still looking but for the moment I do not understand. In fact , I have the impression that strangely tsconfig.json is ignored.

Here are my deposit : https://github.com/GitHubish/angularfire2-test-webpack (all is ok - repo removed)

Reminder I have a mistake with the definition firebase not found : error in the chrome console in the IDE (VS Code) and in the console at the ng build)

Furthermore I have the error "

[ts]
Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.

on app.module.ts and app.component.ts . Strange

Thanks

@GitHubish Can you publish your project to Github for me to take a look at? You have the correct versions installed.

I have successfully run my test project. I have not yet been fully identified when it crashes I try to make you a return tomorrow. However, when I run still only one error in the command line are:

ERROR in [default] Cannot find type definition file for 'firebase'.

but it is not blocking .

If I can still help before leaving, I recreated a basic project being careful this time to install angularfire2 beta4 and not through angularfire2@next (which may be the problem ? ) . Then my config my main.ts and my app.module.ts was not totally fair I think. Here are my 2 files.

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule, environment } from './app/';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, ApplicationRef } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import * as firebase from 'firebase';
import { AngularFireModule } from 'angularfire2';

// Must export the config
const firebaseConfig = {
  apiKey: "",
  authDomain: "",
  databaseURL: "",
  storageBucket: ""
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    CommonModule,
    FormsModule,
    AngularFireModule.initializeApp(firebaseConfig)
  ],
  providers: [],
  entryComponents: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {

}

thanks

After updated typescript in the latest version ie 2.1.0 (I was version 2.0 before ), I have a multitude of typescript error.

Example: ...\node_modules\@angular\core\src\metadata\view.d.ts:129:21 Cannot find name 'Array'. ...\node_modules\@types\jasmine\index.d.ts:301:82 Cannot find name 'RegExp'. ...\node_modules\angularfire2\auth\auth.d.ts:16:118 Cannot find namespace 'firebase'. ...\node_modules\rxjs\operator\merge.d.ts:49:52 Cannot find name 'Array'.

And: .../node_modules/typescript/lib/lib.es2015.core.d.ts' not found. .../node_modules/typescript/lib/lib.es2015.collection.d.ts' not found. .../node_modules/typescript/lib/lib.es5.d.ts' not found.

@sorcamarian @GitHubish The problem is that you’re likely not on TypeScript 2.0+.

I cloned @sorcamarian’s repo and after fixing the syntax errors in typings.json I was able to ng serve without any errors. You also are omitting the bootstrap from your main.ts. You need to include the kickoff at the end of the file:

platformBrowserDynamic().bootstrapModule(MyAppModule);

Please upgrade to TypeScript 2.0 locally and globally to be safe, and try again.

npm install -g typescript@next
npm install typescript@next --save-dev

@sorcamarian @GitHubish You need to remove firebase3 from your globalDependencies in your tsconfig.json.

Check out @ericjim’s solution: https://github.com/angular/angularfire2/issues/414#issuecomment-241588890

Sorry there was a typo in the docs, it’s actually a lowercase bootstrap not an uppercase one.

Try again and let me know what happens.

There was a mismatch on the docs.

Can you check out our quickstart now and see if that helps? Basically you’ll need to make sure you’re on beta4 on AngularFire2 and remove the firebase3 typings.