CODEWITHSUNDEEP
angularjspolymerdartservice-workerprogressive-web-apps
7tupel
7tupel

Reputation: 73

Angular Dart with Polymer and Service-Worker incompatibilty

I'm currently trying to build a web app compatible with the Google Progressive Web Apps specs. To do this i use Angular with Dart and Polymer based Webcomponents instead of the Angular components. So far everything works as expected. To make the app offline capable utilizing the Service-Worker API i use the following dart lib: https://github.com/isoos/service_worker

Using either Polymer or Service-Worker works fine but combining booth just exits with an error on app startup.

This is my AppComponent startup routine:

// ... other imports
import 'package:service_worker/window.dart' as sw; // <-- import alone causes the error

Future main() async {
  await initPolymer();  // <-- causes the error in combination with the import above
  bootstrap(AppComponent);

  if (sw.isNotSupported) {
    print('ServiceWorkers are not supported.');
    return;
  }
  //... initializing service worker
}

The error occurs even if i'm not initializing the Service-Worker, importing the Service-Worker module is enough to cause the error.

Building the app works without any errors.

I'm new to Dart and the Polymer and Angular eco systems and the error message i get is not very helpful to me:

Uncaught Error: NoSuchMethodError: method not found: js_helper.dart:1742 'h' (J.Q(...).h is not a function)
    at Object.J.H (http://127.0.0.1:8080/index.bootstrap.initialize.dart.js:9747:15)
    at http://127.0.0.1:8080/index.bootstrap.initialize.dart.js:10559:1584
    at Isolate.e.(anonymous function) (http://127.0.0.1:8080/index.bootstrap.initialize.dart.js:10608:15)
    at Object.yK (http://127.0.0.1:8080/index.bootstrap.initialize.dart.js:9291:22)
    at http://127.0.0.1:8080/index.bootstrap.initialize.dart.js:9282:10
    at yM.a (http://127.0.0.1:8080/index.bootstrap.initialize.dart.js:2612:72)
    at yM.dart.yM.$2 (http://127.0.0.1:8080/index.bootstrap.initialize.dart.js:2828:24)
    at y9.dart.y9.$1 (http://127.0.0.1:8080/index.bootstrap.initialize.dart.js:2824:31)
    at xM.bi (http://127.0.0.1:8080/index.bootstrap.initialize.dart.js:3767:40)
    at xk.$0 (http://127.0.0.1:8080/index.bootstrap.initialize.dart.js:3167:16)

Can you give me a hint what could cause the error and how to fix it? I would very much like to use the Polymer components instead of the plain Angular components but i need the Service-Worker for offline caching support.

Upvotes: 3

Views: 207

Answers (1)

filiph
filiph

Reputation: 3113

This looks like an issue caused by incompatibility between dart:js (the old style, used by the original polymer package) and package:js (the new style, used by all new packages, including package:service_worker).

You might want to have a look at the polymerize project, which brings Polymer via the new-style interop. Then you'll have no conflict.

Upvotes: 3

Related Questions