我正在尝试在我的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开始转换并启动服务器时，会出现以下错误：
➜ MyProject npm start
> MyProject@0.1.0 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! MyProject@0.1.0 start: `tsc && concurrently "npm run tsc:w" "npm run lite" `
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the MyProject@0.1.0 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找到模块并成功转换？
感谢。最大
答案 0 :(得分：7)
快速入门教程缺少一个重点：SystemJS和TypeScript是两个独立的工具，每个工具都有自己的配置。
向systemjs config添加geofire对打字稿模块分辨率没有影响。看到这个导入
import * as GeoFire from "geofire";
tsc尝试在通常找到javascript模块类型的地方找到geofire.ts，并因为它不存在而给出错误。
有三种不同的方法可以解决这个问题。
在任何情况下，systemjs.config.js中的geofire包配置必须将其格式声明为global，如下所示：
'geofire': {
main: 'dist/geofire.js',
defaultExtension: 'js',
meta: {'dist/geofire.js': {format: 'global'}}
},
第一个解决方案是使用环境模块自己为geofire创建最简单的类型声明。
在app文件夹中创建geofire.d.ts文件：
declare namespace geofire {
function GeoFire(firebaseRef: any): void;
}
declare module 'geofire' {
export = geofire;
}
这足以使import语句编译，并且这次调用是针对typecheck：
var geoFire = new GeoFire(firebaseRef);
打字稿2.0
对于typescript 2.0，上面的代码不起作用。您必须使用特定于打字稿的import =语法
import GeoFire = require('geofire');
并将geofire.d.ts中的定义更改为：
declare module 'geofire' {
function GeoFire(firebaseRef: any): void;
export = GeoFire;
}
另一种解决此问题的方法是使用plugin for SystemJS，它使用TypeScript API调用typescript并挂钩到其模块分辨率，以便考虑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中的脚本标记加载geofire.js，如this post on ionic forum中所述。然后，您不需要将geofire添加到systemjs.config.js。
答案 1 :(得分：3)
注意，我还不是TypeScript专家，这是我第一次涉及类型定义等等，但经过漫长的工作日，我似乎已经有了一些有用的东西（至少对我的设置而言）。我使用的是Ionic 2 RC2，Angular2 2.1.1，Geofire 4.1.2。构建使用webpack。我在我的app目录中使用以下内容创建了geofire.d.ts：
declare module 'geofire' {
type EventType = 'ready' | 'key_entered' | 'key_exited' | 'key_moved';
interface GeoQueryCriteria {
center: number[];
radius: number;
}
interface GeoQueryUpdateCriteria {
center?: number[];
radius?: number;
}
interface GeoCallbackRegistration {
cancel();
}
interface GeoQuery {
center(): number[];
radius(): number;
updateCriteria(criteria: GeoQueryUpdateCriteria);
on(eventType: EventType, callback: (key:string, location: number[], distance: number) => void): GeoCallbackRegistration;
cancel();
}
class GeoFire {
constructor(ref: any);
ref(): any;
set(key: string, loc: number[]): Promise<void>;
get(key: string): Promise<number[]>;
remove(key: string): Promise<void>;
query(criteria: GeoQueryCriteria): GeoQuery;
static distance(location1: number[], location2: number[]);
}
export = GeoFire;
}
最后在我的服务/页面中我可以像这样导入GeoFire：
import GeoFire from 'geofire';
请注意导入的完全语法没有花括号{}。我尝试了很多方法让它以不同的方式工作，但我认为javascript的编写方式，这就是必须要做的。我找到了摆脱编译错误的方法，但是在运行时失败了（没有构造函数命名为......＆＃39;），或者它会在编译中识别构造函数而不是类型。
我只为公共API创建了它，因此如果您因某种原因尝试扩展GeoFire，请注意可能与此定义文件中未公开的其他方法存在名称冲突。
如果这有助于你，请告诉我，我会将其贡献给DefinitelyTyped，所以没有其他人必须经历痛苦我（显然其他人有超过340次的观点）。