`TypeError: Cannot read property 'then' of undefined` when used with serviceworker-webpack-plugin

[rezonant]

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request

Versions.

@ngtools/webpack 1.6.2

Description

When using serviceworker-webpack-plugin, @ngtools/webpack tries to call done.then() on its after-resolvers step, but done is undefined. Crashing code is:

        compiler.plugin('after-resolvers', (compiler) => {
            // Virtual file system.
            compiler.resolvers.normal.plugin('before-resolve', (request, cb) => {
                if (request.request.match(/\.ts$/)) {
                    this.done.then(() => cb(), () => cb());
                }
                else {
                    cb();
                }
            });
        });

Furthermore, this code will run (and crash) even if the @ngtools/webpack loader definition is set to exclude the service worker TS files.

It appears that the fix may be to check if this.done is defined before delaying cb, otherwise just run cb() as if the file was not a .ts, but I'm not well versed with the @ngtools/webpack codebase. I can provide a PR if necessary.

Repro steps.

Create a webpack project which uses @ngtools/webpack as its Typescript compiler, include serviceworker-webpack-plugin, point that plugin at a .ts file.

The log given by the failure.

A change was made locally to serviceworker-webpack-plugin to output the exception that it caught:

TypeError: Cannot read property 'then' of undefined
    at Resolver.compiler.resolvers.normal.plugin (.../node_modules/@ngtools/webpack/src/plugin.js:278:30)
    at Resolver.applyPluginsAsyncSeriesBailResult1 (.../node_modules/tapable/lib/Tapable.js:256:13)
    at Resolver.doResolve (.../node_modules/enhanced-resolve/lib/Resolver.js:110:12)
    at Resolver.resolve (.../node_modules/enhanced-resolve/lib/Resolver.js:86:14)
    at asyncLib.parallel.callback (.../node_modules/webpack/lib/NormalModuleFactory.js:129:29)
    at .../node_modules/async/dist/async.js:3853:24
    at eachOfArrayLike (.../node_modules/async/dist/async.js:1003:9)
    at eachOf (.../node_modules/async/dist/async.js:1051:5)
    at _parallel (.../node_modules/async/dist/async.js:3852:5)
    at Object.parallelLimit [as parallel] (.../node_modules/async/dist/async.js:3935:5)
    at .../node_modules/webpack/lib/NormalModuleFactory.js:121:14
    at .../node_modules/webpack/lib/NormalModuleFactory.js:64:5
    at applyPluginsAsyncWaterfall (.../node_modules/webpack/lib/NormalModuleFactory.js:246:4)
    at .../node_modules/tapable/lib/Tapable.js:268:11
    at NormalModuleFactory.<anonymous> (.../path-override.plugin.js:30:24)
    at .../node_modules/tapable/lib/Tapable.js:270:14
    at NormalModuleFactory._nmf.plugin (.../node_modules/@ngtools/webpack/src/paths-plugin.js:78:24)
    at NormalModuleFactory.applyPluginsAsyncWaterfall (.../node_modules/tapable/lib/Tapable.js:272:13)
    at NormalModuleFactory.create (.../node_modules/webpack/lib/NormalModuleFactory.js:230:8)
    at Compilation._addModuleChain (.../node_modules/webpack/lib/Compilation.js:382:17)
    at Compilation.addEntry (.../node_modules/webpack/lib/Compilation.js:464:8)
    at Compiler.compiler.plugin (.../node_modules/webpack/lib/SingleEntryPlugin.js:24:16)
    at Compiler.applyPluginsParallel (.../node_modules/tapable/lib/Tapable.js:293:14)
    at .../node_modules/webpack/lib/Compiler.js:488:8
    at Compiler.applyPluginsAsyncSeries (.../node_modules/tapable/lib/Tapable.js:195:46)
    at Compiler.compile (.../node_modules/webpack/lib/Compiler.js:481:7)
    at Compiler.runAsChild (.../node_modules/webpack/lib/Compiler.js:282:7)
    at .../node_modules/serviceworker-webpack-plugin/lib/index.js:139:23
    at ServiceWorkerPlugin.handleMake (.../node_modules/serviceworker-webpack-plugin/lib/index.js:138:14)
    at Compiler.<anonymous> (.../node_modules/serviceworker-webpack-plugin/lib/index.js:104:15)
Error: Something went wrong during the make event.
    at .../node_modules/serviceworker-webpack-plugin/lib/index.js:108:20

[rezonant]

Within the original Typescript code, looks like the non-null assertion operator was used, which masks this issue:

    compiler.plugin('after-resolvers', (compiler: any) => {
      // Virtual file system.
      // Wait for the plugin to be done when requesting `.ts` files directly (entry points), or
      // when the issuer is a `.ts` file.
      compiler.resolvers.normal.plugin('before-resolve', (request: any, cb: () => void) => {
        if (request.request.endsWith('.ts')
          || (request.context.issuer && request.context.issuer.endsWith('.ts'))) {
          this.done!.then(() => cb(), () => cb());
        } else {
          cb();
        }
      });
    });

[rezonant]

Branch with the proposed fix -- https://github.com/rezonant/angular-cli/tree/fix-7615

[filipesilva]

@rezonant would you be interested in submitting this fix as a PR?

[rezonant]

No problem. I used a forked patch build with my fix in my work yesterday and it looks to be working correctly.

[clydin]

Can you provide an excerpt of your webpack config showing the service worker plugin? Also, is the service worker plugin defined before or after the AOT plugin? The service worker plugin uses a child compilation (which is where the failure is occurring) so verifying that there are not more systemic issues at play may be prudent.

[rezonant]

Ah, interesting. Moving the service worker plugin below the AotPlugin instance appears to resolve the issue as well. So perhaps this is because AotPlugin has not initialized this.done yet (since it is intercepting a child compilation from before it is initialized)?

Here is the plugin instantiation I'm using:

      new ServiceWorkerWebpackPlugin({
        entry: path.join(
          __dirname, 
          'src/service-worker/main.ts'
        ),
        filename: `sw.${timestamp}.js`,
        transformOptions: data => {
          data.timestamp = timestamp;
          data.workerUrl = `/sw.${timestamp}.js`;

          return data;
        }
      }),