Angularfire: pure firebase usage which is not supported by angularfire2 such as Storage or Messaging

[morninng]

Version info

Angular:

"@angular/common": "^4.2.0-rc.2",
"@angular/compiler": "^4.2.0-rc.2",
"@angular/core": "^4.2.0-rc.2",
"@angular/forms": "^4.2.0-rc.2",
"@angular/http": "^4.2.0-rc.2",
"@angular/platform-browser": "^4.2.0-rc.2",
"@angular/platform-browser-dynamic": "^4.2.0-rc.2",
"@angular/router": "^4.2.0-rc.2",

Firebase:

"firebase": "^4.1.1",

AngularFire:

"angularfire2": "^4.0.0-rc.1",

Other
"@angular/cli": "^1.1.0",
"@angular/compiler-cli": "^4.1.3",

Failing code

import * as messaging from 'firebase/messaging';

export class XXXXX{
    constructor(){
        this.messaging = messaging();
        this.messaging.onTokenRefresh(()
    }

Debug output

* Errors in the JavaScript console *

core.es5.js:1020 ERROR Error: Uncaught (in promise): TypeError: __WEBPACK_IMPORTED_MODULE_2_firebase_messaging__ is not a function
TypeError: __WEBPACK_IMPORTED_MODULE_2_firebase_messaging__ is not a function
    at new CloudMessagingService (cloud-messaging.service.ts:36)
    at _createClass (core.es5.js:9605)
    at _createProviderInstance$1 (core.es5.js:9573)
    at resolveNgModuleDep (core.es5.js:9558)
    at NgModuleRef_.get (core.es5.js:10644)
    at resolveNgModuleDep (core.es5.js:9562)
    at NgModuleRef_.get (core.es5.js:10644)
    at resolveDep (core.es5.js:11147)
    at createClass (core.es5.js:11011)
    at createDirectiveInstance (core.es5.js:10831)
    at new CloudMessagingService (cloud-messaging.service.ts:36)
    at _createClass (core.es5.js:9605)
    at _createProviderInstance$1 (core.es5.js:9573)
    at resolveNgModuleDep (core.es5.js:9558)
    at NgModuleRef_.get (core.es5.js:10644)
    at resolveNgModuleDep (core.es5.js:9562)
    at NgModuleRef_.get (core.es5.js:10644)
    at resolveDep (core.es5.js:11147)
    at createClass (core.es5.js:11011)
    at createDirectiveInstance (core.es5.js:10831)
    at resolvePromise (zone.js:769)
    at resolvePromise (zone.js:740)
    at zone.js:817
    at ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:424)
    at Object.onInvokeTask (core.es5.js:3924)
    at ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Zone.webpackJsonp../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:191)
    at drainMicroTaskQueue (zone.js:584)
    at HTMLButtonElement.ZoneTask.invoke (zone.js:490)

What has happening

When I am using firebase 3.9.0 and angularfire2 4.0.0-rc0, messaging and storage is available by following code

import * as messaging from 'firebase/messaging';

export class XXXXX{
    constructor(){
        this.messaging = messaging();
        this.messaging.onTokenRefresh(()
    }

import * as storage from 'firebase/storage';
export class XXXXX{
    constructor(){
       this.storage_ref = storage().ref();
    }

However after firebase major upgrade to 4.x, I cannot access either messaging nor storage with the above code.

[davideast]

Hi @morninng! The import syntax you have it a bit off.

Instead of:

import * as messaging from 'firebase/messaging';

You first import firebase/app and then naked import the feature needed.

import * as firebase from 'firebase/app'; // brings in app in typings
import 'firebase/messaging'; // naked import to bring in feature

[morninng]

Thank you! it works