3

I am trying to integrate angularfire2 and firebase in my angular 5 project but it gives 'firebase' namespace error.

package.json

{
  "name": "angular5-firebase",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.0.0",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.0.0",
    "@types/firebase": "^2.4.32",
    "angularfire2": "^5.0.0-rc.4",
    "core-js": "^2.4.1",
    "firebase": "^4.8.1",
    "rxjs": "^5.5.2",
    "typings": "^2.1.1",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.6.1",
    "@angular/compiler-cli": "^5.0.0",
    "@angular/language-service": "^5.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "~2.4.2"
  }
}

I have tried following soluntions but none of them solve my problem.

  • import * as firebase from 'firebase' in app.module.ts;
  • "types": ["firebase"] in tsconfig.json
  • installed @types/firebase using 'npm install --save @types/firebase'

After all this I have installed firebase typings with 'typings install firebase --save' and added ' "files": ["typings/index.d.ts"] ' in tsconfig.json. It removes all error of namespace from console but when I check localhost:4200 in browser no view was rendered there. By inspecting element I can see that no view is rendered in .

enter image description here

tsconfig.json

{
    "compileOnSave": false,
    "compilerOptions": {
        "outDir": "./dist/out-tsc",
        "sourceMap": true,
        "declaration": false,
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "target": "es5",
        "typeRoots": [
            "node_modules/@types"
        ],
        "lib": [
            "es2017",
            "dom"
        ],
        "types": [
            "firebase"
        ]
    },
    "files": [
        "typings/index.d.ts"
    ]
}

1 Answer 1

6

Your issue has been posted here: https://github.com/angular/angularfire2/issues/1387.

So you should keep on old version of firebase while they make a new release.

npm uninstall --save firebase
npm install --save [email protected]
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.