Usando o GeoFire em um aplicativo Angular2
Estou tentando configurar o GeoFire no meu aplicativo Angular2 (RC5). Instalei o geofire e o firebase com o npm e configurei o systemjs para importá-lo. Aqui está o meu 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"
}
}
e meu arquivo de configuração 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' },
};
Finalmente, tento importar o geofire no meu arquivo app.component.ts da seguinte forma:
import * as GeoFire from "geofire";
Mas, ao executar o npm, comece a transpilar e iniciar o servidor, obtenha o seguinte erro:
➜ 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
Aqui está o meu tsconfig:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
}
}
O restante dos arquivos do projeto é baseado no início rápido do angular2 encontrado aqui:
https://angular.io/guide/quickstart
Alguém tem alguma idéia de como posso fazer com que o tsc encontre o módulo e transpile com êxito?
Obrigado. Máx.