Argument of type [type] is not assignable to parameter of type [type]

Question

I got this error when I run npx webpack

Version: webpack 3.12.0
Time: 57478ms
        Asset     Size  Chunks                    Chunk Names
       app.js   172 kB       0  [emitted]         app
    vendor.js  7.91 MB       1  [emitted]  [big]  vendor
   app.js.map   256 kB       0  [emitted]         app
vendor.js.map  9.28 MB       1  [emitted]         vendor
  [21] ./angular/service.ts 3.92 kB {0} [built]
  [23] ./angular/Utility.ts 2.21 kB {0} [built]
  [37] (webpack)/buildin/global.js 509 bytes {1} [built]
  [42] ./angular/component/empty.ts 1.35 kB {0} [built]
  [66] ./angular/api.ts 3.15 kB {0} [built]
  [85] ./angular/modules/LoadComponentModule.ts 1.92 kB {0} [built]
 [250] ./angular/bootstrap.ts 2.58 kB {0} [built]
 [251] ./angular/env.json 325 bytes {0} [built]
 [587] ./angular/ErrorCatcher.ts 2.57 kB {0} [built]
 [588] ./angular/modules/MaterialModules.ts 2.4 kB {0} [built]
 [589] ./angular/modules/AFModules.ts 1.17 kB {0} [built]
 [594] ./angular/Pipes.ts 5.64 kB {0} [built]
 [595] ./angular/component/layout.ts 2.52 kB {0} [built]
 [601] ./angular/component/management/wrapper.ts 3.91 kB {0} [built]
 [605] ./angular/component/project/project_list.ts 4.87 kB {0} [built]
    + 595 hidden modules

ERROR in ./angular/component/search.ts
[tsl] ERROR in D:\nodeapps\myproject\angular\component\search.ts(101,34)
      TS2345: Argument of type 'string' is not assignable to parameter of type 'CollectionReference'.

ERROR in ./angular/component/search.ts
[tsl] ERROR in D:\nodeapps\myproject\angular\component\search.ts(102,26)
      TS2345: Argument of type 'CollectionReference' is not assignable to parameter of type 'Query | CollectionReference'.
  Type 'firebase.firestore.CollectionReference' is not assignable to type 'FirebaseFirestore.CollectionReference'.
    Property 'offset' is missing in type 'CollectionReference'.

The error line in the file is this.collectionPath and org:

this.ref = this.afs.collection(this.collectionPath, org=>{
    var r = this.whereAll(org, this.requirementQuerys);
    this.params.forEach(p=>{
        r = this.whereAll(r, p.querys);
    });
    return this.orderBy ? r.orderBy(this.orderBy) : r;
});

Here is my dependencies from package.json:

  "dependencies": {
    "firebase-admin": "^5.12.1",
    "firebase-functions": "^1.0.4",
    "firebase-tools": "^3.18.6"
  },
  "devDependencies": {
    "@angular/animations": "^5.2.5",
    "@angular/cdk": "^5.2.1",
    "@angular/cli": "^1.6.8",
    "@angular/common": "^5.2.5",
    "@angular/compiler": "^5.2.5",
    "@angular/core": "^5.2.5",
    "@angular/forms": "^5.2.5",
    "@angular/http": "^5.2.5",
    "@angular/material": "^5.2.1",
    "@angular/platform-browser": "^5.2.5",
    "@angular/platform-browser-dynamic": "^5.2.5",
    "@angular/router": "^5.2.5",
    "@google-cloud/functions-emulator": "^1.0.0-beta.4",
    "@types/hammerjs": "^2.0.35",
    "ajv": "^6.0.0",
    "angularfire2": "^5.0.0-rc.6",
    "concurrently": "^3.5.1",
    "es6-shim": "~0.35.3",
    "exports-loader": "~0.7.0",
    "expose-loader": "~0.7.4",
    "firebase": "^5.0.4",
    "glob": "^7.1.2",
    "hammerjs": "^2.0.8",
    "http-server": "^0.11.1",
    "imports-loader": "~0.7.1",
    "node-sass": "^4.7.2",
    "reflect-metadata": "~0.1.12",
    "rxjs": "^5.5.6",
    "ts-loader": "^3.5.0",
    "typescript": "^2.7.1",
    "webpack": "^3.11.0",
    "webpack-dev-server": "^2.11.1",
    "webpack-sources": "^1.1.0",
    "zone.js": "~0.8.20"
  },

Here is my webpack.config.js

require('./html_style');

const path = require('path');
const webpack = require('webpack');
const CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
const isVendor = function(module){return module.context && module.context.indexOf("node_modules") !== -1;};

module.exports = {
  devtool: 'source-map',
  watch: false,
  entry: {
    'app': './angular/bootstrap.ts'
  },
  output: {
    filename: '[name].js',
    path: path.resolve('./public/angular')
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js']
  },
  module: {
    exprContextCritical: false,
    loaders: [
      { test: /\.ts?$/, exclude: /node_modules/, loader: 'ts-loader' }
    ]
  },
  plugins: [
    new CommonsChunkPlugin({name: 'vendor', minChunks: isVendor})
  ]
}

I have been googling, but no luck. Any idea? My platform is Windows. My node version is 10.9.0 and npm version is 6.4.0.

Answer 1

Think that this line hints to the main issue: Type 'firebase.firestore.CollectionReference' is not assignable to type 'FirebaseFirestore.CollectionReference'. Apparently there are two different CollectionReference classes. One located in firbase.firestore and the other in FirebaseFireStore. So probably you have a wrong import?

Answer 2

Your problem is somewhat similar to https://github.com/angular/angularfire2/issues/1467. It occurs when you have angularfire2 and firebase libraries versions mismatch. Solution for your problem is to use strong typings. I've modified your code so you'll have an example how to fix your problem:

import { AngularFirestore, Query, QueryFn } from 'angularfire2/firestore';

let query: QueryFn = org => {
    let r: Query = this.whereAll(org, this.requirementQuerys);
    this.params.forEach(p => {
        r = this.whereAll(r, p.querys);
    });
    return this.orderBy ? r.orderBy(this.orderBy) : r;
};
this.ref = this.afs.collection(this.collectionPath, query);

Just in case if you still have problems I've used "angularfire2": "^5.0.0-rc.12" and "firebase": "^5.4.0". In the future look at angularfire2 github issues for explanation what versions are compatible if after next update of dependencies your project doesn't work.