tools: inserted by polymer build / polymer serve causes warning in IE11, and result in blank polymer-2-starter-kit

I was able to reproduce this as well. Although, I believe this issue would be better off being in the PSK repository.

Versions & Environment

• Polymer CLI: 1.1.0
• node: 6.9.1
• Operating System: Windows 10

Steps to Reproduce

1. Install polymer-cli (`npm i -g polymer-cli)
2. Create a directory for the app and change to that directory (mkdir test && cd test)
3. Initialize polymer-2-starter-kit (polymer init polymer-2-starter-kit)
4. Serve app (polymer serve -o)

Expected Results

App loads successfully in all supported browsers

Actual Results

App fails to load in IE11. Also, throws warnings in IE and Edge.

Browsers Affected

• Chrome
• Firefox
• Safari 10 (Untested)
• Safari 9 (Untested)
• Edge (Warnings)
• IE 11 (Fails to Load and Warnings)

Console Output

Edge:

IE11:

Still getting this issue in IE11 11.540.15063.0

Please help with this, as far as I can tell Polymer 2 does not work at all with ie11 after being built.

I removed the line

<!--! do not remove -->

After building and the original error was gone, but a different error popped up complaining about an unexpected end of file, and the page still did not display in the browser.

Also, I am getting the same error messages and problems in EDGE.

Just updated polymer-cli to 1.3.1 and generated a fresh polymer-2-starter-kit app. Still seeing the same issue:

I FOUND THE PROBLEM!!! After a lot of research, I saw that the ‘Shop’ Polymer 2 Application is working in IE, so I starting ‘disassembling’ that application, inserting my own code (and the needed code from what was generated by the starter kit (or CLI, whatever… you know…) In the end it came out that in the my-app custom element the app-route is defined as follows:

    <app-route
        route="{{route}}"
        pattern="[[rootPattern]]:page"
        data="{{routeData}}"
        tail="{{subroute}}"></app-route>

Where the rootPattern variable is initialized like this:

      constructor() {
        super();

        // Get root pattern for app-route, for more info about `rootPath` see:
        // https://www.polymer-project.org/2.0/docs/upgrade#urls-in-templates
        this.rootPattern = (new URL(this.rootPath)).pathname;
      }

But the URL object is not compatible with IE (11), as we can see from this page:

https://caniuse.com/#search=url

And it blows up everything, in a very strange way, that’s not easy to spot. So now I changed the route as in:

<app-route route="{{route}}" pattern="/:page" data="{{routeData}}" tail="{{subroute}}"></app-route>

Without the variable at all, of course removing the offending line! And it works without any problem, in any browser…

Do I deserve a prize, for one full day of tests? 😃

P.S.: now I’m curious… Please, could the other users check to see if this solve the problem?

@andreabioli - I was able to get my page to work after a few hours of fiddling with things but unfortunately I don’t remember exactly what I did. Sorry, and good luck.

I know I tried straight up editing the index file and couldn’t get things working, tried using different versions of webcomponentsjs and didn’t have any success. Then I uninstalled polymer-cli completely. Installed the newest version of polymer-bundler and then reinstalled polymer-cli. I think I also made some changes to the index file and my-app file but I’m not sure which of those changes were related to getting things working again.

As a side note, this kind of timeline on bugs which break Polymer-Cli on windows or IE/Edge really has me hesitant to ever upgrade after finding a working version and worried about the future use of polymer at my workplace.

Released Polymer Starter Kit v3.1.0! 😄

Ok, clear. Thx!

Update: ‘polymer serve’ is working! ‘polymer build --preset es5-bundled’ is not working…

Update2: ‘polymer build --js-compile --js-minify --css-minify --bundle --add-service-worker’ IS WORKING! I think --html-minify is breaking the build at the moment, because when I add that parameter it is not working.

@unionthugface iron-ajax now requires the promise polyfill instead of including it. Check out the iron-ajax repo https://github.com/PolymerElements/iron-ajax/pull/280

Now I tried to jump over the offending line (CustomElementRegistry.js, line 142, this._internals.patchAndUpgradeTree(document)😉, and now I have no errors, only the warnings, but the page is totally blank, it looks like Polymer is not initialized at all…

I can add even more: The class defined in CustomElementInternals.js is CustomElementRegistry, that at this page, https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry, is said to be NOT supported in Internet Explorer. I’m starting to suspect something… 😦 Tracing the code, the problem is (probably) that in that class, the function _flush() is called with an internal variable (this._internals, line 142 of the file I have) that is undefined, and it’s trying to call this._internals.patchAndUpgradeTree(document), that obviously can only fail…

Not even a quick workaround, just for the time being???

Just updated bundler to preserve <!--! comments incidentally in https://github.com/Polymer/polymer-bundler/pull/546