Angular 2 Inheritance super() injection breaks with Webpack

Question

I have a base class:

import {DomSanitizer} from '@angular/platform-browser';

export class Base {
    constructor(protected sanitizer: DomSanitizer){
    }

    //.....lots more stuff
}

This class is extended by the following derived class:

import {DomSanitizer} from '@angular/platform-browser';

export class ChildClass extends Base{
    constructor(protected sanitizer: DomSanitizer) {
        super(sanitizer);
    }
}

My module is importing BrowserModule.

I'm using Webpack to compile and am getting the following error at runtime:

Uncaught ReferenceError: platform_browser_1 is not defined -- app.bundle.js:58139

app.bundle.js is output by webpack, and I can see in the compiled source that indeed platform_browser_1 is not available within that chunk.

I'm not splitting my app up in any purposeful manner. Is there something I don't know about how inheritance could cause Webpack to erroneously not import a required class or something?

This is definitely a Webpack issue, because if I remove the inheritance-based usave of the DomSanitizer and just put it into the child component directly, it works fine.

To clarify, platform-browser is the module from which the DomSanitizer is imported.

Does anyone have any idea what's going on? Any help is appreciated.

Your code doesn't have import for Base and cannot explain what's going on (the issue has nothing to do with inheritance or super). This also means that actual code differs from the one you're showing. Nothing is known on Webpack config and chunks. A workable plunker could probably help. — Estus Flask
– Estus Flask, Commented Oct 31, 2016 at 7:26
Yep, trying to remove the noise. The base class is imported (you'd be getting a different error otherwise). I'll try to add more in a bit... — dudewad
– dudewad, Commented Oct 31, 2016 at 16:45

dudewad · Accepted Answer · 2016-11-01 02:59:22Z

Okay so basically, I tried a number of things to see how to get Webpack to output the proper code. I noticed that Webpack would, with other modules, output a variable in the transpiled block as: var platform_browser_1 = ...

However, in the chunk for my base class, it was not even outputting it at all. So, I thought there must be a reason it was ignoring it. Since these blocks get annotated, I figured that perhaps adding an @Component annotation to the base class would work, and it did. So, I went from:

export class Base {....

To:

@Component({}) //empty component decorator
export class Base {
    //....
}

Problem solved, for whatever reason. I have no explanation as to why, unfortunately, but if anyone feels like investigating, it's probably because @Component provides metadata per my research on the NG docs site.

Hope this helps somebody!!

Collectives™ on Stack Overflow

Angular 2 Inheritance super() injection breaks with Webpack

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related