在 Angular2 应用程序中使用 GeoFire

我正在尝试在我的 Angular2 (RC5) 应用程序中设置 GeoFire。我已经使用 npm 安装了 geofire 和 firebase 并配置了 systemjs 来导入它。这是我的 package.json：

{
  "name": "MyProject",
  "version": "0.1.0",
  "scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/common": "^2.0.0-rc.5",
    "@angular/compiler": "^2.0.0-rc.5",
    "@angular/core": "^2.0.0-rc.5",
    "@angular/forms": "0.3.0",
    "@angular/http": "2.0.0-rc.5",
    "@angular/platform-browser": "^2.0.0-rc.5",
    "@angular/platform-browser-dynamic": "^2.0.0-rc.5",
    "@angular/router": "3.0.0-rc.1",
    "@angular/router-deprecated": "2.0.0-rc.2",
    "@angular/upgrade": "2.0.0-rc.5",
    "angular2-in-memory-web-api": "0.0.15",
    "bootstrap": "^3.3.6",
    "core-js": "^2.4.0",
    "firebase": "^3.3.0",
    "geofire": "^4.1.1",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "systemjs": "0.19.27",
    "zone.js": "^0.6.12"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.10",
    "typings": "^1.0.4"
  }
}

和我的 systemjs 配置文件：

  var map = {
    'app':                        'app', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs',
    'firebase':                   'node_modules/firebase',
    'geofire':                    'node_modules/geofire',
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
    'firebase':                   { main: 'firebase.js', defaultExtension: 'js' },
    'geofire':                    { main: 'dist/geofire.js', defaultExtension: 'js' },
  };

最后，我尝试在 app.component.ts 文件中导入 geofire，如下所示：

import * as GeoFire from "geofire";

但是在运行 npm start 来转换并启动服务器时，出现以下错误：

➜  MyProject npm start

> [email protected] start /Users/max/Development/myproject
> tsc && concurrently "npm run tsc:w" "npm run lite"

app/app.component.ts(3,26): error TS2307: Cannot find module 'geofire'.

npm ERR! Darwin 15.5.0
npm ERR! argv "/usr/local/Cellar/node/5.10.1/bin/node" "/usr/local/bin/npm" "start"
npm ERR! node v5.10.1
npm ERR! npm  v3.8.3
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: `tsc && concurrently "npm run tsc:w" "npm run lite" `
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] start script 'tsc && concurrently "npm run tsc:w" "npm run lite" '.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the MyProject package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     tsc && concurrently "npm run tsc:w" "npm run lite"
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs MyProject
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls MyProject
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/max/Development/MyProject/npm-debug.log

这是我的 tsconfig：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  }
}

其余的项目文件基于此处找到的 angular2 快速入门：

https://angular.io/guide/quickstart

有人知道如何让 tsc 找到模块并成功转译吗？

谢谢。最大限度。

该快速入门教程缺少一个重要点：SystemJS 和 TypeScript 是两个独立的工具，每个工具都有自己的配置。

将 geofire 添加到 systemjs 配置对 typescript 模块分辨率没有影响。看到这个导入后

import * as GeoFire from "geofire";

tsc 尝试在通常可以找到 javascript 模块类型的地方查找 geofire.ts，并给出错误，因为它不在那里。

有三种不同的方法可以解决这个问题。

任何状况之下，geofiresystemjs.config.js 中的包配置必须将其格式声明为global， 像这样：

'geofire': {
    main: 'dist/geofire.js', 
    defaultExtension: 'js', 
    meta: {'dist/geofire.js': {format: 'global'}} 
 },

第一个解决方案是使用环境模块为 geofire 自己创建尽可能简单的类型声明。

Create geofire.d.ts应用程序文件夹中的文件：

declare namespace geofire {
    function GeoFire(firebaseRef: any): void;
}

declare module 'geofire' {
    export = geofire;
}

这足以编译 import 语句以及调用类型检查：

   var geoFire = new GeoFire(firebaseRef);

Typescript 2.0 的注释

对于 typescript 2.0，上面的代码不起作用。您必须使用特定于打字稿的import = syntax

import GeoFire = require('geofire');

并更改定义geofire.d.ts to:

declare module 'geofire' {
    function GeoFire(firebaseRef: any): void;
    export = GeoFire;
}

解决这个问题的另一种可能的方法是使用plugin对于使用 TypeScript API 调用 TypeScript 并挂钩其模块解析的 SystemJS，以便考虑 SystemJS 配置。使用该插件，该导入将在浏览器中运行时运行，但从命令行调用 tsc 仍会给出相同的错误。

第三种方法是使用 SystemJS API 导入 geofire，而不是 app.component.ts 中的 import 语句：

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

declare var SystemJS : any;
var GeoFirePromise = SystemJS.import('geofire');

@Component({
  selector: 'my-app',
  template: '<h1>My First Angular 2 App</h1>'
})

export class AppComponent {

    constructor() {  // or wherever you need to use geofire

        GeoFirePromise.then(function(GeoFire: any) {
            console.log(typeof GeoFire);
        });
    }

}

注意SystemJS.import返回一个必须加载 geofire.js 的承诺，所以无论你想在哪里使用它，你都必须这样做

    GeoFirePromise.then(function(GeoFire: any) {

如果这不方便，你可以声明全局 GeoFire 变量

declare var GeoFire: any;

并使用 HTML 中的 script 标签加载 geofire.js，如中所述离子论坛上的这篇文章。然后，您就不需要将 geofire 添加到 systemjs.config.js 中。