Empty Runtime never replaced

[unsafecode]

I'm trying to integrate the pluging in the angular2-seed template but I always get the default "empty" runtime in the build:

/***/ 711:
/***/ function(module, exports) {

    var warn = "offline-plugin: runtime.install() was executed without OfflinePlugin being added to webpack.config.js. " +
      "The installation of offline-plugin has not been performed. " +
      "You can ignore this message if you are skipping the OfflinePlugin during development. " +
      "Otherwise, you may have a configuration issue.";

    if (console.warn) {
      console.warn(warn);
    } else if (console.log) {
      console.log(warn);
    }

    exports.install = function() {};
    exports.applyUpdate = function() {};

/***/ }

The plugin is actually properly configured, since I do see changes when I provide more options (ex. not providing AppCache output), and I do see the ServiceWorker output file (sw.js) in the dist folder.

What else could I be missing?

[NekR]

Hi @unsafecode.

What else could I be missing?

Maybe nothing, it's weird in webpack and depends on how you run it. How do you run the build: 1) with cli webpack?; 2) programmatically in node.js?; 3) with webpack-dev-server?

[unsafecode]

Hi @NekR, I'm using the CLI:

webpack --inline --colors --progress --display-error-details --display-cached

Also tried the --production switch - was thinking that the plugin might activate in PROD mode only.

Additionally, I also use webpack-dev-server when live coding.

[NekR]

What do the --inline switch? I don't see it in any docs. Is it webpack 2?

[NekR]

Additionally, I also use webpack-dev-server when live coding.

Well, this plugin doesn't work with hot-reloading, if something.

[unsafecode]

@NekR OK, fine for the dev server - it doesn't really matter while developing.

AFAIK, I could not find the --inline docs as well (it was already in the template). Yet still, I tried to remove it but nothing changes.

[NekR]

@unsafecode I'll check it of course, but basically this plugin cannot adequately work with hot-reloading. It can probably work with normal webpack-dev-server, but I'm not sure if it makes sense.

[unsafecode]

@NekR I also believe hot-reloading w/ SW does not really make sense.

On the other hand, what can I change for the regular build?

[NekR]

Hi @unsafecode, sorry for delay.

On the other hand, what can I change for the regular build?

I'm not sure because everything supposed to work. I didn't have time to test with that template yet, I'll do as soon as I can.

Also, you didn't answer my question before: do you use webpack 2 or 1? _angular2-seed template )seems to depend on wepback 1, but I ask just to be sure.

[NekR]

Hi @unsafecode, I just checked the angular2-seed project and found that awesome-typescript-loader is the problem here -- by some reason webpack cannot resolve offline-plugin/runtime when that loader is used.

This is how it looks when I build it:

I'll try to investigate what is going on there, but clearly, that loading is doing something wild with modules resolving.

[NekR]

Okay, I just checked and it works with:

require('offline-plugin/runtime').install();

but doesn't with:

import OfflinePlugin from 'offline-plugin/runtime';

OfflinePlugin.install(); 

which is correct because there is no TypeScript definition for offline-plugin.

Does it work for you with require? Maybe you want to contribute TS definition to this repo? (Can it be defined here instead of on DefinitelyTyped?)

[unsafecode]

@NekR Nice, thanks for your findings! Maybe you can try with:

import * as OfflinePlugin from 'offline-plugin/runtime';

And sure, I can contribute to the typings definition for this repo.

[NekR]

TypeScript should import the module anyway and error is on build time, not runtime, so it's purely loader + TypeScript situation. So, did require worked for you?

[unsafecode]

@NekR Yes, require worked

[NekR]

Okay, closing this then. Thanks for reporting! If you need any guidance or help with contribution, feel free to contact me on Twitter, Gitter or whatever :-)