packaging for Angular Universal

[ivancamilov]

I'm using the official guide for building an Angular Universal project using the CLI. However, the application won't run when importing ServiceWorkerModule. It gives this error:

/project/node_modules/@angular/service-worker/companion/module.js:1
(function (exports, require, module, __filename, __dirname) { import { NgModule } from '@angular/core';
                                                              ^^^^^^
SyntaxError: Unexpected token import
    at Object.exports.runInThisContext (vm.js:73:16)
    at Module._compile (module.js:543:28)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at Object.kEM4 (/project/dist-server/main.bundle.js:1:256573)
    at n (/project/dist-server/main.bundle.js:1:211)

From what I understand, this issue is caused because @angular/service-worker needs to be packaged using commonjs. Here are some official guidelines for packaging I found.

[ivancamilov]

Just in case somebody wanders in here from search results, I've managed to make it work temporarily using the solution outlined in this comment.

[bob-lee]

@ivancamilov I tried that workaround and found repacked bundle size increased a lot (from 45K to 1.1M) then I am getting TypeError: Cannot read property 'subscribe' of undefined error?

[ivancamilov]

@bob-lee are you recompiling the server or the client app?

Just to be clear, if you're using the official guide for Universal you should end up with two different bundles, one for the browser and the other for the server. The one you should be repackaging is the server one. Given that, I don't think you should worry too much about the bundle size since that is not gonna be shipped to the client anyway.

As per the error you're getting, it seems related to an Observable. I'd suggest running the node app with the --inspect flag to pinpoint the error a bit better.

[bob-lee]

@ivancamilov i am packaging server bundle, curious what happened to you. Same increased bundle size? Your repacked bundle worked smoothly without hiccup? I am testing it using 'firebase serve --only functions, hosting'

[ivancamilov]

Yes, my repackaged bundle is 1.1MB; however, as I said, I don't think you should worry too much about the repackaged bundle size since that is not gonna be shipped to the client anyway.

My bundle does work without issues. I am unclear about the firebase serving, since I don't really use it —but AFAIK firebase serves static files only, doesn't it?

In any case: do you have the same issues when running node --inspect server.js?

[ivancamilov]

sorry, closed this by mistake.

It seems most work is now being done on the Angular v5 side, so I was wondering if this is still the proper channel for issues such as this one.

[bob-lee]

I am waiting for angular-cli to upgrade so I can start playing with a new @angualr/service-worker@5

[ivancamilov]

@bob-lee me too. However, it's not clear to me that there's going to be support in the CLI for @angular/service-worker just yet. It seems there's a small NGSW-CLI in the new lib.

Here's some small documentation I was pointed to a few hours ago on the new @angular/service-worker.