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

Question

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

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

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

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

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

然后，当我尝试引用它以将其中的 "WindowsAzure" class 导入我的 TypeScript 文件时，intelisense 不会将该库作为选项提供给其他库（如 ionic-native、rxjs、momentjs 等）。我也将它添加到 "declarations.d.ts" 但那也没有 help.But 我仍然继续并手动导入它，如下所示：

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

当我运行命令时，

VS Code 不会抱怨，"ionic serve" 也不会抱怨（在构建代码时）。但是，当该应用程序尝试在浏览器 (Chrome) 中启动时，出现运行时错误 找不到模块 "cordova-plugin-ms-azure-mobile-apps".

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

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

ionic平台添加浏览器

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

ionic 运行浏览器

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

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

npm 安装 cordova-plugin-ms-azure-mobile-apps --save

然后它被添加到我的应用程序 package.json 的 "dependencies" 部分。然后，当我尝试在 "import" 的 TypeScript 文件中引用它时，我得到了作为 InteliSense 选项的库。但是最终的结果还是一样。我仍然在 Chrome 浏览器中遇到运行时错误 "Cannot find module cordova-plugin-ms-azure-mobile-apps"，在 Android phone.

上出现白色空白屏幕

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

P.S。 - 只有当我在 Ionic 2 应用程序中尝试时才会发生这种情况。否则，当我在单独的项目中使用 HTML/JavaScript/Cordova/Node.js 时，它绝对可以正常工作。 :皱眉:

谢谢。

Answer 1

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

试试这个：检查答案。

如果声明 cordova 不起作用： 做

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

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

检查 plugin.xml 中的文件

plugins/cordova-plugin-ms-azure-mobile-apps There should be an entry:

   <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 2

每当您添加第 3 方 cordova 插件时，通常它会将新对象添加到 window 对象。而且您无需导入任何内容即可使用这些对象。 WindowsAzure 插件也是如此。

在项目中添加 'cordova-plugin-ms-azure-mobile-apps' 后，您可以使用 window.WindowsAzure 调用其功能。

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

declare var window: any;

Answer 3

以下是在 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

Answer 4

终于成功了！感谢微软的支持！

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

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

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

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

我在所有“imports”之后和“@Component”之前将其声明为常规 JavaScript 对象 class and/or "@Injectable" service/provider class, 如:

```

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”语句识别，那么您应该尝试在旧的 [=57] 中使用它=] 方式。

就这么简单的解决方案，我最终花了 2 天的时间。 :(

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

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

3rd Party Library “cordova-plugin-ms-azure-mobile-apps” not getting recognized in my Ionic 2 app

azure-mobile-services

cordova-plugins

ionic2