Question

我正在尝试构建一个使用Apache Cordova插件进行联系的联系应用程序。当尝试为我的应用程序执行npm run bundle命令时，它给我上面标题中的错误。我该如何解决？

我尝试将package.json中的依赖项更新为不同的版本，并且还尝试摆脱"module": "commonjs"中的tsconfig.webpack.json，但这没有用。

===========
// index.ts
===========

export class CordovaApp{
    constructor(){
        document.getElementById('findContactButton').addEventListener('click', this.onfindContactButtonClick);
    }

    onfindContactButtonClick(){
        const searchText = (<HTMLInputElement>document.getElementById('searchText')).value;
        let fields = [navigator.contacts.fieldType.displayName, navigator.contacts.fieldType.name];

        navigator.contacts.find(fields, (contacts) => {
            var ul = document.getElementById('contacts');
            contacts.forEach(function (contact) {
                var li = document.createElement('li');
                li.className = 'collection-item';
                li.innerText = contact.displayName;
                ul.appendChild(li);
            });
        }, (error) => {
            alert(error);
        },
        {
            filter: searchText, multiple: true,
            desiredFields: [navigator.contacts.fieldType.displayName]        
        });

        return false;
    }
}

let instance = new CordovaApp()

===========
// index.js
===========
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var CordovaApp = (function () {
    function CordovaApp() {
        document.getElementById('findContactButton').addEventListener('click', this.onfindContactButtonClick);
    }
    CordovaApp.prototype.onfindContactButtonClick = function () {
        var searchText = document.getElementById('searchText').value;
        var fields = [navigator.contacts.fieldType.displayName, navigator.contacts.fieldType.name];
        navigator.contacts.find(fields, function (contacts) {
            var ul = document.getElementById('contacts');
            contacts.forEach(function (contact) {
                var li = document.createElement('li');
                li.className = 'collection-item';
                li.innerText = contact.displayName;
                ul.appendChild(li);
            });
        }, function (error) {
            alert(error);
        }, {
            filter: searchText, multiple: true,
            desiredFields: [navigator.contacts.fieldType.displayName]
        });
        return false;
    };
    return CordovaApp;
}());
exports.CordovaApp = CordovaApp;
var instance = new CordovaApp();
//# sourceMappingURL=index.js.map

===========
// package.json
===========
"dependencies": {
        "cordova-android": "^6.2.3",
        "cordova-browser": "^4.1.0",
        "cordova-ios": "^4.4.0",
        "cordova-plugin-compat": "^1.0.0",
        "cordova-plugin-contacts": "^3.0.1",
        "cordova-plugin-whitelist": "^1.3.2"
    },
    "devDependencies": {
        "@types/cordova": "^0.0.34",
        "@types/cordova-plugin-contacts": "^2.3.0",
        "typescript": "^2.4.1",
        "webpack": "^1.14.0",
        "webpack-dev-server": "^1.16.2",
        "ts-loader": "1.3.3",
        "html-loader": "0.4.4",
        "css-loader": "0.26.1",
        "awesome-typescript-loader": "^3.2.1"
    }

===========
// Running Command prompt
===========
npm run bundle

[at-loader] Checking started in a separate process...

[at-loader] Checking finished with 4 errors
Hash: 52c5912a7e1b4f149e40
Version: webpack 1.15.0
Time: 1014ms
               Asset     Size  Chunks             Chunk Names
./www/dist/bundle.js  7.51 kB       0  [emitted]  main
    + 1 hidden modules

ERROR in [at-loader] ./www/js/index.ts:8:33
    TS2339: Property 'contacts' does not exist on type 'Navigator'.

ERROR in [at-loader] ./www/js/index.ts:8:75
    TS2339: Property 'contacts' does not exist on type 'Navigator'.

ERROR in [at-loader] ./www/js/index.ts:10:19
    TS2339: Property 'contacts' does not exist on type 'Navigator'.

ERROR in [at-loader] ./www/js/index.ts:23:39
    TS2339: Property 'contacts' does not exist on type 'Navigator'.

该代码应该正确捆绑，我应该没有错误。

Answer 1

您必须在“文件”属性中的src / tsconfig.json中添加以下行：

"../plugins/cordova-plugin-contacts/types/index.d.ts"

此后，您必须重新启动正在运行的“离子服务”命令（或只是重新构建它）。

src / tsconfig.json文件最后应如下所示：

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/spec",
    "types": [
      "jasmine",
      "node"
    ]
  },
  "files": [
    "test.ts",
    "polyfills.ts",
    "../plugins/cordova-plugin-contacts/types/index.d.ts"
  ],
  "include": [
    "**/*.spec.ts",
    "**/*.d.ts"
  ]
}

我希望这会对您有所帮助。请注意，这是针对Ionic 4的解决方案。Ionic3或更低版本可能有所不同。

TS2339：类型“导航器”上不存在属性“联系人”

1 个答案: