angularfire2

Error: no se puede resolver ''@ firebase/webchannel-wrapper''

Question

Por lo tanto, recientemente me actualicé a lo último y mejor para angularfire2 y he tenido algunos problemas. Seguí la guía del desarrollador de angularfire2 para instalar el proyecto, pero sigo recibiendo el siguiente error:

[18:57:50]  ionic-app-script task: "build" [18:57:50]  Error: ./node_modules/firebase/firestore/platform_browser/webchannel_connection.js Module not found: Error: 
        Can''t resolve ''@firebase/webchannel-wrapper'' in 
        ''/Users/usr/Documents/project/node_modules/firebase/firestore/platform_browser'' resolve 
        ''@firebase/webchannel-wrapper'' in 
        ''/Users/usr/Documents/project/node_modules/firebase/firestore/platform_browser'' Parsed request is 
        a module using description file: /Users/usr/Documents/project/node_modules/firebase/package.json 
        (relative path: ./firestore/platform_browser) Field ''browser'' doesn''t contain a valid alias configuration 
        after using description file: /Users/usr/Documents/project/node_modules/firebase/package.json 
        (relative path: ./firestore/platform_browser) resolve as module looking for modules in 
        /Users/usr/Documents/project/node_modules using description file: 
        /Users/usr/Documents/project/package.json (relative path: ./node_modules) Field ''browser'' doesn''t 
        contain a valid alias configuration after using description file: 
        /Users/usr/Documents/project/package.json (relative path: ./node_modules) using description file: 
        /Users/usr/Documents/project/package.json (relative path: 
        ./node_modules/@firebase/webchannel-wrapper) no extension Field ''browser'' doesn''t contain a valid alias 
        configuration /Users/usr/Documents/project/node_modules/@firebase/webchannel-wrapper doesn''t exist 
        .ts Field ''browser'' doesn''t contain a valid alias configuration 
        /Users/usr/Documents/project/node_modules/@firebase/webchannel-wrapper.ts doesn''t exist .js Field 
        ''browser'' doesn''t contain a valid alias configuration 
        /Users/usr/Documents/project/node_modules/@firebase/webchannel-wrapper.js doesn''t exist .json 
        Field ''browser'' doesn''t contain a valid alias configuration 
        /Users/usr/Documents/project/node_modules/@firebase/webchannel-wrapper.json doesn''t exist as 
        directory /Users/usr/Documents/project/node_modules/@firebase/webchannel-wrapper doesn''t exist 
        [/Users/usr/Documents/project/node_modules/@firebase/webchannel-wrapper] 
        [/Users/usr/Documents/project/node_modules/@firebase/webchannel-wrapper.ts] 
        [/Users/usr/Documents/project/node_modules/@firebase/webchannel-wrapper.js] 
        [/Users/usr/Documents/project/node_modules/@firebase/webchannel-wrapper.json] 
        [/Users/usr/Documents/project/node_modules/@firebase/webchannel-wrapper] @ 
        ./node_modules/firebase/firestore/platform_browser/webchannel_connection.js 12:25-64 @ 
        ./node_modules/firebase/firestore/platform_browser/browser_platform.js @ 
        ./node_modules/firebase/firestore/platform_browser/browser_init.js @ ./node_modules/firebase/firestore.js @ 
        ./node_modules/angularfire2/firestore/collection/changes.js @ 
        ./node_modules/angularfire2/firestore/public_api.js @ ./node_modules/angularfire2/firestore/index.js @ 
        ./src/app/app.component.ts @ ./src/app/app.module.ts @ ./src/app/main.ts 

paquete.json

{
  "name": "stockup",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "4.4.4",
    "@angular/compiler": "4.4.4",
    "@angular/compiler-cli": "4.4.4",
    "@angular/core": "4.4.4",
    "@angular/forms": "4.4.4",
    "@angular/http": "4.4.4",
    "@angular/platform-browser": "4.4.4",
    "@angular/platform-browser-dynamic": "4.4.4",
    "@angular/tsc-wrapped": "4.4.4",
    "@ionic-native/barcode-scanner": "4.3.0",
    "@ionic-native/core": "3.14.0",
    "@ionic-native/splash-screen": "3.12.1",
    "@ionic-native/status-bar": "3.12.1",
    "@ionic/storage": "2.0.1",
    "@types/node": "8.0.19",
    "angularfire2": "^5.0.0-rc.0",
    "cordova-ios": "^4.4.0",
    "cordova-plugin-device": "^1.1.4",
    "cordova-plugin-splashscreen": "^4.0.3",
    "cordova-plugin-statusbar": "^2.2.2",
    "cordova-plugin-whitelist": "^1.3.1",
    "firebase": "^4.5.0",
    "install": "^0.10.1",
    "ionic-angular": "^3.7.1",
    "ionic-plugin-keyboard": "^2.2.1",
    "ionicons": "^3.0.0",
    "npm": "^5.4.2",
    "phonegap-plugin-barcodescanner": "^6.0.8",
    "promise-polyfill": "^6.0.2",
    "rxjs": "5.4.3",
    "sudo": "^1.0.3",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.18"
  },
  "devDependencies": {
    "@ionic/app-scripts": "^3.0.0",
    "typescript": "^2.5.3"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "phonegap-plugin-barcodescanner": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-whitelist": {},
      "ionic-plugin-keyboard": {}
    },
    "platforms": [
      "ios"
    ]
  }
}

He estado golpeando mi cabeza contra la pared tratando de resolver esto y esperaba que alguien fuera pudiera ayudar. Información relevante del entorno a continuación:

cli packages: (/usr/local/lib/node_modules)

@ionic/cli-utils  : 1.12.0
ionic (Ionic CLI) : 3.12.0

global packages:

cordova (Cordova CLI) : 7.0.1 

local packages:

@ionic/app-scripts : 3.0.0
Cordova Platforms  : ios 4.4.0
Ionic Framework    : ionic-angular 3.7.1

System:

Node  : v6.11.3
npm   : 5.4.2 
OS    : OS X El Capitan
Xcode : Xcode 8.2.1 Build version 8C1002 

Avíseme si hay información adicional que pueda proporcionar para ayudar. Gracias por adelantado.

Answer 1

Error:

./node_modules/firebase/firestore/platform_browser/webchannel_connection.js Módulo no encontrado: Error: no se puede resolver ''@ firebase / webchannel-wrapper'' en

Solución:

Necesita instalar el @firebase/webchannel-wrapper .

npm install @firebase/webchannel-wrapper --save-exact

Answer 2

Asegúrate de agregar el paquete

npm install @firebase/webchannel-wrapper --save

¡¡Y!! Importe en app.module (o sea como yo y pierda otro día)

import {webchannel} from ''@firebase/webchannel-wrapper'';