Typed.js breaks @angular/pwa

[rezonjov]

Description

When used in Angular 6/7 with PWA ng add @angular/pwa installed, typed.js breaks the service worker, the service worker is not detected by the browser.

Demo

You can pull https://github.com/rezonjov/typed-angular, I've setup all the necessary plugin.
Check src/app/app.component.ts

Steps to Reproduce

1. npm install -g @angular/cli
2. ng new typed-angular
3. ng add @angular/pwa
4. init typed.js into app.component.ts
5. ng build --prod
6. http-server ./dist/typed-angular
7. open browser in INCOGNITO and check that ngsw-worker.js is not detected
8. comment new Typed and run ng build --prod again
9. clear the cache and application data, ngsw-worker.js should now be detected

Expected behavior: ngsw-worker.js is detected and service worker works as expected

Actual behavior: ngsw-worker.js is not detected

Reproduces how often: always

Additional Information

Temporary Solution
I deleted index.d.ts and use the import import * as Typed from 'typed.js' for the time being which works well with Angular PWA. Somehow the type definition is causing the issue, it might be related to how AOT works in Angular.

[mattboldt]

This is very strange. I'm not super familiar with how the type definitions file works w/ angular cli, but if deleting it fixes the build there must be some kind of conflict. Do you think you could fork and investigate with your project?

Maybe due to the definitions file, the AOT is expecting to be imported differently than import Typed from 'typed.js'? I did a little digging, and this issue touches on how to export in these files: microsoft/TypeScript#8335 (comment)

[rezonjov]

Hi @mattboldt,

So it turns out, it's not type definition. It's actually due to how setTimeout / setInterval is unreliable in ServiceWorkers used by PWA w3c/ServiceWorker#838.

The service worker actually works and will register itself AFTER typed.js animation finish.
The fix for the time being is to manually register the service worker, you just need to add the following codes into main.ts file.

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .then(() => {
    if ('serviceWorker' in navigator && environment.production) {
      navigator.serviceWorker.register('/ngsw-worker.js');
    }
  })
  .catch(err => console.error(err));

I think it's not a bug by typed.js, rather than with how setTimeout and interval interact with serviceworker, i'm closing the issue. However perhaps it would be nice if you can add the fix to the readme. :)

[bibek687]

Hey @rezonjov
I followed your code to use typedjs in an Angular 6 app.

when I import like import Typed from 'typed.js';its not working ..
but when I import like import * as Typed from 'typed.js'; it works but IOT build is failing with below error
ERROR in /Users/home.component.ts(91,21):
TS2351: Cannot use 'new' with an expression whose type lacks a call or construct signature.
Version: typescript 2.7.2

Can you guide me the correct way to import typedjs @mattboldt

[xperiti]

I have the same problem as @bibek687

any solution?