如何在Angular CLI创建的Angular4项目中无Ionic使用Cordova插件

嘿，我刚好折腾过Angular + Cordova的组合，完全不用依赖Ionic就能搞定！下面我就以你需要的Network Information插件为例，一步步教你怎么操作：

首先得在你的Angular项目里初始化Cordova环境：

• 打开终端，进入你的Angular项目根目录，执行这条命令创建Cordova项目文件夹：

  cordova create cordova com.yourdomain.yourappname YourAppName
  

  这里的cordova是要生成的文件夹名，后面的包名和应用名可以改成你自己的。
• 进入刚创建的cordova文件夹，添加你需要的移动端平台（比如安卓）：

  cordova platform add android
  

  如果是iOS平台，就用cordova platform add ios（需要Mac环境才能编译）。
• 安装你需要的Network Information插件：

  cordova plugin add cordova-plugin-network-information
  

Cordova会把全局对象注入到页面，但TypeScript默认不知道这些对象，得先做声明：

• 在Angular项目的src目录下，新建或编辑typings.d.ts文件，添加以下内容：

  declare var cordova: any;
  declare var Connection: any;
  

  这样TypeScript就不会报“找不到cordova/Connection”的错误了。
• 修改Angular的构建输出路径，让构建产物直接放到Cordova的www文件夹里。打开angular.json，找到architect -> build -> options -> outputPath，把默认的dist/你的项目名改成../cordova/www（因为Cordova文件夹在Angular根目录下）。

⚠️ 重要提醒：所有Cordova插件的API必须在deviceready事件触发后才能调用，这是Cordova的核心规则，不然肯定会报错！

比如在你的app.component.ts里这么写：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  networkStatus: string = '正在检测网络状态...';

  ngOnInit() {
    // 等待Cordova设备就绪
    document.addEventListener('deviceready', () => {
      this.setupNetworkListener();
    }, false);
  }

  setupNetworkListener() {
    // 获取当前网络状态
    const currentNetwork = navigator.connection.type;
    const networkLabels = {
      [Connection.UNKNOWN]: '未知网络',
      [Connection.ETHERNET]: '以太网',
      [Connection.WIFI]: 'WiFi',
      [Connection.CELL_2G]: '2G蜂窝',
      [Connection.CELL_3G]: '3G蜂窝',
      [Connection.CELL_4G]: '4G蜂窝',
      [Connection.CELL]: '通用蜂窝',
      [Connection.NONE]: '无网络'
    };
    this.networkStatus = `当前网络：${networkLabels[currentNetwork]}`;

    // 监听网络状态变化
    document.addEventListener('online', () => {
      this.networkStatus = '网络已连接';
    }, false);

    document.addEventListener('offline', () => {
      this.networkStatus = '网络已断开';
    }, false);
  }
}

然后在app.component.html里显示状态：

<div class="network-status">
  <p>{{ networkStatus }}</p>
</div>

• 先构建Angular项目：

  ng build --prod
  

  开发环境测试的话，可以去掉--prod参数，构建产物会自动输出到Cordova的www文件夹。
• 进入cordova文件夹，运行应用到设备或模拟器：

  # 安卓
  cordova run android
  # iOS（Mac环境）
  cordova run ios
  

• 浏览器里没法测试Cordova插件，必须在真实设备或者模拟器上运行才能看到效果。
• 每次修改Angular代码后，都需要重新构建，再用Cordova命令运行。

内容的提问来源于stack exchange，提问作者Sandeep_0828