CODEWITHSUNDEEP
angularwebpacktypescript2.0
dudewad
dudewad

Reputation: 13933

Angular 2 Inheritance super() injection breaks with Webpack

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.

Upvotes: 4

Views: 2540

Answers (1)

dudewad
dudewad

Reputation: 13933

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!!

Upvotes: 2

Related Questions