Not able to connect Firebase with Angular 2

0
votes

i am trying to get the data from firebase. but i am getting the below error node_modules/@firebase/database/dist/cjs/index.d.ts(16,35): error TS7016: Could not find a declaration file for module '@firebase/app'. 'C:/Users/Paandi/Desktop /Project/Demo/node_modules/@firebase/app/dist/cjs/index.js' implicitly has an 'a ny' type. node_modules/@firebase/database/dist/cjs/src/api/Database.d.ts(3,46): error TS70 16: Could not find a declaration file for module '@firebase/app'. 'C:/Users/Paan di/Desktop/Project/Demo/node_modules/@firebase/app/dist/cjs/index.js' implicitly has an 'any' type. node_modules/@firebase/database/dist/cjs/src/api/TransactionResult.d.ts(28,15): error TS2304: Cannot find name 'object'. node_modules/@firebase/database/dist/cjs/src/api/onDisconnect.d.ts(42,27): error TS2304: Cannot find name 'object'. node_modules/@firebase/database/dist/cjs/src/core/AuthTokenProvider.d.ts(16,52): error TS7016: Could not find a declaration file for module '@firebase/app'. 'C: /Users/Paandi/Desktop/Project/Demo/node_modules/@firebase/app/dist/cjs/index.js' implicitly has an 'any' type. node_modules/@firebase/database/dist/cjs/src/core/Repo.d.ts(3,29): error TS7016: Could not find a declaration file for module '@firebase/app'. 'C:/Users/Paandi/ Desktop/Project/Demo/node_modules/@firebase/app/dist/cjs/index.js' implicitly ha s an 'any' type. node_modules/@firebase/database/dist/cjs/src/core/snap/ChildrenNode.d.ts(58,34): error TS2304: Cannot find name 'object'. node_modules/@firebase/database/dist/cjs/src/core/snap/IndexMap.d.ts(20,51): err or TS2304: Cannot find name 'object'. node_modules/@firebase/database/dist/cjs/src/core/util/util.d.ts(136,75): error TS2304: Cannot find name 'object'. node_modules/angularfire2/auth/auth.d.ts(1,36): error TS2307: Cannot find module '@firebase/auth-types'. node_modules/angularfire2/database/database.d.ts(1,34): error TS2307: Cannot fin d module '@firebase/database-types'. node_modules/angularfire2/database/interfaces.d.ts(1,67): error TS2307: Cannot f ind module '@firebase/database-types'. node_modules/angularfire2/database/list/audit-trail.d.ts(3,30): error TS2307: Ca nnot find module '@firebase/database-types'. node_modules/angularfire2/database/list/state-changes.d.ts(5,30): error TS2307: Cannot find module '@firebase/database-types'. node_modules/angularfire2/firebase.app.module.d.ts(3,38): error TS2307: Cannot f ind module '@firebase/app-types'. node_modules/angularfire2/firebase.app.module.d.ts(4,30): error TS2307: Cannot f ind module '@firebase/auth-types'. node_modules/angularfire2/firebase.app.module.d.ts(5,34): error TS2307: Cannot f ind module '@firebase/database-types'. node_modules/angularfire2/firebase.app.module.d.ts(6,35): error TS2307: Cannot f ind module '@firebase/messaging-types'. node_modules/angularfire2/firebase.app.module.d.ts(7,33): error TS2307: Cannot f ind module '@firebase/storage-types'. node_modules/angularfire2/firebase.app.module.d.ts(8,35): error TS2307: Cannot f ind module '@firebase/firestore-types'. node_modules/angularfire2/firestore/collection/changes.d.ts(1,59): error TS2307: Cannot find module '@firebase/firestore-types'. node_modules/angularfire2/firestore/collection/collection.d.ts(1,83): error TS23 07: Cannot find module '@firebase/firestore-types'. node_modules/angularfire2/firestore/document/document.d.ts(1,65): error TS2307: Cannot find module '@firebase/firestore-types'. node_modules/angularfire2/firestore/firestore.d.ts(1,56): error TS2307: Cannot f ind module '@firebase/firestore-types'. node_modules/angularfire2/firestore/interfaces.d.ts(2,80): error TS2307: Cannot find module '@firebase/firestore-types'. node_modules/angularfire2/firestore/observable/fromRef.d.ts(1,75): error TS2307: Cannot find module '@firebase/firestore-types'. npm ERR! code ELIFECYCLE npm ERR! errno 2 npm ERR! [email protected] build: tsc -p src/ npm ERR! Exit status 2 npm ERR! npm ERR! Failed at the [email protected] build script. npm ERR! This is probably not a problem with npm. There is likely additional log ging output above.

npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\Paandi\AppData\Roaming\npm-cache_logs\2018-03-28T15_29_02 _103Z-debug.log npm ERR! code ELIFECYCLE npm ERR! errno 2 npm ERR! [email protected] prestart: npm run build npm ERR! Exit status 2 npm ERR! npm ERR! Failed at the [email protected] prestart script. npm ERR! This is probably not a problem with npm. There is likely additional log ging output above.

npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\Paandi\AppData\Roaming\npm-cache_logs\2018-03-28T15_29_02 _227Z-debug.log

my system.config.js file is below

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      'app': 'app',

      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',


    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        defaultExtension: 'js',
        meta: {
          './*.js': {
            loader: 'systemjs-angular-loader.js'
          }
        }
      },
      rxjs: {
        defaultExtension: 'js'
      }


    }
  });
})(this);

my tsconfig.json file is below

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "typeRoots": [
      "../node_modules/@types"
    ],
    "types": [
      "jasmine",
      "firebase",
      "node"
    ]

  }
}

and my package.json file is below

{
  "name": "angular-quickstart",
  "version": "1.0.0",
  "description": "QuickStart package.json from the documentation, supplemented with testing support",
  "scripts": {
    "build": "tsc -p src/",
    "build:watch": "tsc -p src/ -w",
    "build:e2e": "tsc -p e2e/",
    "serve": "lite-server -c=bs-config.json",
    "serve:e2e": "lite-server -c=bs-config.e2e.json",
    "prestart": "npm run build",
    "start": "concurrently \"npm run build:watch\" \"npm run serve\"",
    "pree2e": "npm run build:e2e",
    "e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first",
    "preprotractor": "webdriver-manager update",
    "protractor": "protractor protractor.config.js",
    "pretest": "npm run build",
    "test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
    "pretest:once": "npm run build",
    "test:once": "karma start karma.conf.js --single-run",
    "lint": "tslint ./src/**/*.ts -t verbose"
  },
  "keywords": [],
  "author": "",
  "license": "MIT",
  "dependencies": {
    "@angular/common": "~4.3.4",
    "@angular/compiler": "~4.3.4",
    "@angular/core": "~4.3.4",
    "@angular/forms": "~4.3.4",
    "@angular/http": "~4.3.4",
    "@angular/platform-browser": "~4.3.4",
    "@angular/platform-browser-dynamic": "~4.3.4",
    "@angular/router": "~4.3.4",
    "@angular/router-deprecated": "^2.0.0-rc.2",
    "@types/firebase": "^3.2.1",
    "angular-in-memory-web-api": "~0.3.0",
    "angularfire2": "^5.0.0-rc.6",
    "core-js": "^2.4.1",
    "firebase": "4.8.0",
    "materialize-css": "^0.100.2",
    "ng2-bootstrap": "^1.6.3",
    "react-route-config": "^2.0.1",
    "react-router": "^4.2.0",
    "rxjs": "5.0.1",
    "systemjs": "0.19.40",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "concurrently": "^3.2.0",
    "lite-server": "^2.2.2",
    "typescript": "~2.1.0",
    "canonical-path": "0.0.2",
    "tslint": "^3.15.1",
    "lodash": "^4.16.4",
    "jasmine-core": "~2.4.1",
    "karma": "^1.3.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~4.0.14",
    "rimraf": "^2.5.4",
    "@types/node": "^6.0.46",
    "@types/jasmine": "2.5.36"
  },
  "repository": {},
  "main": "karma-test-shim.js"
}

Please help me what i am missing

1
angularfirebase-authentication

1 Answers

0
votes

In order to make connection to your firebase db, to authenticate users... you should use angularFire2.

in your module, if you want to get data from the firebase db:

import { AngularFirestore } from 'angularfire2/firestore';

if you want to authenticate users use:

import { AngularFireAuth } from 'angularfire2/auth';

I would know how to help you otherwise, could you maybe be a little bit more explicit explaining what you want to do, or replicate your issue in a stackblitz/plunkr ?