How to analyze the reason of getter haven't been called？

settingdust · October 24, 2021, 1:22am

Firefox Developer 94.0b9

I’m trying to use angular elements for content script. The angular app compiled to two javascript file (main, polyfill). Then, it’s should do something. But the error appeared.

github.com

angular/elements-builds/blob/12.0.x/esm2015/src/create-custom-element.js#L55-L106


get ngElementStrategy() {
    // NOTE:
    // Some polyfills (e.g. `document-register-element`) do not call the constructor, therefore
    // it is not safe to set `ngElementStrategy` in the constructor and assume it will be
    // available inside the methods.
    //
    // TODO(andrewseguin): Add e2e tests that cover cases where the constructor isn't called. For
    // now this is tested using a Google internal test suite.
    if (!this._ngElementStrategy) {
        const strategy = this._ngElementStrategy =
            strategyFactory.create(this.injector || config.injector);
        // Re-apply pre-existing input values (set as properties on the element) through the
        // strategy.
        inputs.forEach(({ propName }) => {
            if (!this.hasOwnProperty(propName)) {
                // No pre-existing value for `propName`.
                return;
            }
            // Delete the property from the instance and re-apply it through the strategy.
            const value = this[propName];

This file has been truncated. show original

It’s weird. The first point (line 481) haven’t been called. So the second point (line 512) do it, the error ERROR TypeError: can't access property "events", this.ngElementStrategy is undefined.

I have no idea for how to trace this error correctly. Why the getter haven’t been called?

Repo with error: https://github.com/SettingDust/obsidian-web-clipper/tree/main/projects/content-script