第 3 方库“cordova-plugin-ms-azure-mobile-apps”在我的 Ionic 2 应用程序中未得到识别

Question

在过去 2 天里到处寻找（并浏览了各种网站上过去的论坛主题），但没有解决方案，我作为最后的手段在这里发帖。我知道每个人都很忙，但这让我很生气。

我已经尝试了所有可能的方法，从多次从头开始创建应用程序，一次添加一个库，然后运行并确保它正常工作，然后添加另一个库，然后运行应用程序......

在我的应用中添加“cordova-plugin-ms-azure-mobile-apps”之前，一切都很好。我正在使用以下命令：

离子插件添加 cordova-plugin-ms-azure-mobile-apps --save

这会在我的 config.xml 中添加一个条目。

然后，当我尝试引用它以将其中的“WindowsAzure”类导入我的 TypeScript 文件时，intelisense 不会像其他库（如 ionic-native、rxjs、 momentjs 等）。我也将它添加到“declarations.d.ts”中，但这也没有帮助。但我仍然继续手动导入它，如下所示：

从“cordova-plugin-ms-azure-mobile-apps”导入 { WindowsAzure }；

当我运行命令时，VS Code 不会抱怨，“离子服务”也不会抱怨（在构建代码时）。但是，当应用程序尝试在浏览器 (Chrome) 中启动时，我收到运行时错误提示 Cannot find module "cordova-plugin-ms-azure-mobile-apps"。

为了确保，我尝试使用“ionic run android”在连接的 Android 手机上运行它。在手机上，它也尝试启动应用程序（我得到了它应该的启动画面）然后屏幕变白并保持不变。将 Android 手机连接到笔记本电脑后，我尝试在 Chrome 中进行检查。它显示了与“Uncauth Error”相同的“Cannot find module “cordova-plugin-ms-azure-mobile-apps”错误。 请注意，我在添加（并在代码中使用它）这个库之前在手机上运行了该应用程序，它就像一个魅力。

为了尝试另一种方式，我使用以下命令将浏览器添加为平台：

离子平台添加浏览器

然后使用命令运行应用程序：

离子运行浏览器

同样的行为。它没有启动。

为了尝试更多，我使用命令添加了库：

npm install cordova-plugin-ms-azure-mobile-apps --save

然后它被添加到我的应用程序的 package.json 中的“依赖项”部分。然后，当我尝试在“导入”中的 TypeScript 文件中引用它时，我将库作为 InteliSense 选项。但最终的结果还是一样。我在 Chrome 浏览器中仍然出现运行时错误“找不到模块 cordova-plugin-ms-azure-mobile-apps”，在 Android 手机上仍然出现白色空白屏幕。

如果您能帮我解决这个问题，我将不胜感激。我非常需要帮助，因为我已经用尽了所有的选择和所有的思考能力。 :(

附： - 仅当我尝试使用 Ionic 2 应用程序时才会发生这种情况。否则，当我在单独的项目中使用 HTML/JavaScript/Cordova/Node.js 时，它工作得非常好。 :皱眉:

谢谢。

Answer 1

终于搞定了！感谢微软的支持！

我认为，在 TypeScript 的世界中，这不是最好的解决方案，但这是让它发挥作用的唯一方法。

所以，我所要做的就是将“cordova-plugin-ms-azure-mobile-apps”中的“WindowsAzure”命名空间作为常规普通的旧 JavaScript 变量，而不是执行“import”。

也就是说，而不是将 WindowsAzure 导入为：

从“cordova-plugin-ms-azure-mobile-apps”导入 { WindowsAzure }；

我在所有“imports”之后和“@Component”类和/或“@Injectable”之前将其声明为常规 JavaScript 对象>" 服务/提供者类，如：

```

import { ... } from '...';

declare var WindowsAzure: any;

@Injectable
export class ... {
    client: any;
    ....
    constructor or yourMethod(...) {
        this.client = new WindowsAzure.MobileServiceClient('http://YourAzureMobileApp.azurewebsites.net');
    }
    ....
    ....
    //Your logic
}

```

显然，在 Ionic 2 中，如果您的第三方库没有被常规的“import”语句识别，那么您应该尝试以旧的 JavaScript 方式使用它。

这就是我最终花了 2 天时间解决某件事的简单方法。 :(

希望这可以帮助人们节省时间。

Answer 2

导入未包含在Ionic Native 中的第 3 方 Cordova 插件。

试试这个： 检查答案here。

如果声明 cordova 不起作用： 做

ionic plugin add cordova-plugin-ms-azure-mobile-apps --save

IT 应该并且正在正确安装插件。

检查plugin.xml文件

插件/cordova-plugin-ms-azure-mobile-apps 应该有一个条目：

   <js-module src="src_of_js" name="some_name">
    <clobbers target="global_object_name" />   </js-module>

通常clobbers目标名称是加载所有cordova插件时用于插件的全局对象名称。（这通常是cordova.plugins.somename） Typescript 通常会抱怨，因为它在编译时找不到全局变量。

只要做：

declare var global_object:any;

在您文件中的所有其他导入之后并使用该插件。

Answer 3

每当您添加 3rd 方 cordova 插件时，通常它会将新对象添加到窗口对象。你不需要导入任何东西来使用这些对象。 WindowsAzure 插件也是如此。

在项目中添加“cordova-plugin-ms-azure-mobile-apps”后，您可以使用window.WindowsAzure 调用其函数。

注意：如果编辑器或构建过程抱怨 window 变量，那么您可以在导入语句之后在 ts 文件中定义它，如下所示：

声明变量窗口：任意；

Answer 4

以下是在 ionic 应用程序中添加和使用 cordova-plugin-ms-azure-mobile-apps 插件的步骤。

# Create a hello world ionic v2 project
ionic start ionicv2 --v2
cd ionicv2

# Add the Cordova plugin
ionic plugin add cordova-plugin-ms-azure-mobile-apps

# Add the following 3 lines to app.component.ts
declare var WindowsAzure: any;
var client = new WindowsAzure.MobileServiceClient("https://yoursitename.azurewebsites.net");
window.alert("MobileServiceClient instance: " + client);

# Build and run for browser
ionic platform add browser
ionic run browser