AngularFireMessaging keeps Universal from compiling

[JeMeister]

Hi, Im having this problem when I try to use messaging on an application using Angular Universal.

C:\angular-universal\functions\node_modules\@angular\fire\bundles\messaging.umd.js:23
                var requireMessaging = rxjs.from(import('firebase/messaging'));
                                                 ^^^^^^

SyntaxError: Unexpected token import
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:607:28)
    at Object.Module._extensions..js (module.js:654:10)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:499:12)
    at Function.Module._load (module.js:491:3)
    at Module.require (module.js:587:17)
    at require (internal/module.js:11:18)
    at Object.@angular/fire/messaging (C:\angular-universal\functions\dist\server\main.js:1745:

Angular version:

Angular CLI: 7.0.2
Node: 8.9.4
OS: win32 x64
Angular: 7.0.0
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, platform-server, router
... service-worker

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.10.2
@angular-devkit/build-angular     0.10.2
@angular-devkit/build-optimizer   0.10.2
@angular-devkit/build-webpack     0.10.2
@angular-devkit/core              7.0.2
@angular-devkit/schematics        7.0.2
@angular/cli                      7.0.2
@angular/fire                     5.1.0
@angular/pwa                      0.10.2
@ngtools/webpack                  7.0.2
@schematics/angular               7.0.2
@schematics/update                0.10.2
rxjs                              6.3.3
typescript                        3.1.3
webpack                           4.19.1

[orestes]

I'm running into the same issue

Angular CLI: 1.7.1
Node: 9.11.2
OS: darwin x64
Angular: 5.2.6
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

@angular/cdk: 5.2.4
@angular/cli: 1.7.1
@angular/fire: 5.1.0
@angular/flex-layout: 5.0.0-beta.13
@angular/material: 5.2.4
@angular-devkit/build-optimizer: 0.0.35
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.1
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.6.2
webpack-bundle-analyzer: 3.0.2
webpack: 3.11.0

The build process doesn't break for me but the dev-server does. Same line and error.

[davideast]

@jamesdaniels I think we need a way to strip out the dynamic import for UMD builds.

[JeMeister]

The error still happening.

Angular with Angular Universal build the application correctly, but when I try to run the build using the command: firebase serve --only functions,hosting the error appears.

The error also appears when I try to upload the build to firebase using the command: firebase deploy.

C:\angular-universal\functions\node_modules\@angular\fire\bundles\messaging.umd.js:23
                var requireMessaging = rxjs.from(import('firebase/messaging'));
                                                 ^^^^^^

SyntaxError: Unexpected token import
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:607:28)
    at Object.Module._extensions..js (module.js:654:10)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:499:12)
    at Function.Module._load (module.js:491:3)
    at Module.require (module.js:587:17)
    at require (internal/module.js:11:18)
    at Object.@angular/fire/messaging (C:\angular-universa\functions\dist\server\main.js:2303:18)
Shutting down...

[JeMeister]

@davideast, @jamesdaniels I have a clean installation with Angular Universal and @angular/fire here:

https://github.com/Jemonge/angular-universal-firebase

After installing @angular/fire and configuring AngularFireMessagingModule in app.module.ts I got the same error.

You can reproduce the error following these steps:

1. git clone https://github.com/Jemonge/angular-universal-firebase.git
2. cd angular-universal-firebase
3. npm install
4. npm run build:ssr
5. npm run serve:ssr

[jamesdaniels]

Work around is to not include AngularFireMessaging in your server app module btw, only include it in your browser. I will strip it from the UMD but will need to fiddle with the build script.

[CaerusKaru]

Until @davideast can find a way to not have import in the UMD bundles, you'll need to use Webpack to bundle your server build. We handle this for you if you use the Angular Universal schematics instead of the universal-starter or the default Universal schematics.

To set up, do the following:

ng new <projectName>
cd <projectName>
ng add @nguniversal/express-engine --clientProject <projectName>

[JeMeister]

Any news about this problem? Any estimated date when it could be solved?

My project has been delayed by this problem. 😕

[muthufmass]

When can we expect an fix for this issue ?

[jamesdaniels]

A fix has been released in 5.2.0-rc.3