在Angular2应用程序中使用GeoFire
发布时间：2020-12-17 07:57:49 所属栏目：安全 来源：网络整理
导读：我正在尝试在我的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
|
我正在尝试在我的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','firebase': { main: 'firebase.js','geofire': { main: 'dist/geofire.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找到模块并成功转换？ 谢谢.最大.
这个快速入门教程缺少一个重点：SystemJS和TypeScript是两个独立的工具,每个工具都有自己的配置.
将geofire添加到systemjs config对typescript模块解析没有影响.看到这个导入 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,上面的代码不起作用.您必须使用特定于typescript的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的promise,因此您需要在任何地方使用它 GeoFirePromise.then(function(GeoFire: any) {
如果这不方便,您可以声明全局GeoFire变量 declare var GeoFire: any; 并使用HTML中的脚本标记加载geofire.js,如this post on ionic forum所述.然后,您不需要将事件添加到systemjs.config.js. （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |