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.

Slippery

Try asserting that this.collectionPath is of type CollectionReference. – Viole

Maybe show some code and related model classes – Junitajunius

@Junitajunius In fact the project is from other developer. I'm setting it up in my local. I'm trying to understand the code. I'm sending some code screenshots for the first error here and here that might help. – Slippery

Sounds like the signature with two arguments requires the first one to not be a string? – Southdown

Answer 1

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.

Rossman

What's about the line of import? I already have these line of import. Your suggested import causes the errors in other places. – Slippery

Please check my other comment #52147405 – Slippery

Try to change google cloud imports to angularfire imports, your have problems because you mixed up imports from different libraries – Rossman

Answer 2

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?

Linis

not sure this is an answer or a comment. Could you please expand it? You are talking about the second error. The first error is not that one. – Slippery

What I tried to say is that you are having two different CollectionReference classes in your project. Without seeing more of your code I can't tell what's wrong exactly but it would help to see your imports section and the whereAll function. See github.com/angular/angularfire2/…. and github.com/firebase/firebase-js-sdk/… FirebaseFirestore seems to come from the Firebase library directly rather than from the angular2fire library – Linis

In fact the project is from other developer. I'm setting it up in my local. I'm trying to understand the code. I'm sending some code screenshots for the first error here and here that might help. – Slippery