The app gets loaded in development mode, but not work in production mode for Firefox, IE and Edge browsers, and the browser console prints out the following error:

ERROR TypeError: a.__shady is undefined
Stack trace:
Rb@http://local.polymer-chat.com/assets/bower_components/webcomponentsjs/webcomponents-hi-sd-ce.js:59:218
La@http://local.polymer-chat.com/assets/bower_components/webcomponentsjs/webcomponents-hi-sd-ce.js:57:152
insertBefore@http://local.polymer-chat.com/assets/bower_components/webcomponentsjs/webcomponents-hi-sd-ce.js:120:445
Xc/<@http://local.polymer-chat.com/assets/bower_components/webcomponentsjs/webcomponents-hi-sd-ce.js:40:211
n@http://local.polymer-chat.com/assets/components.html-13.js:1:2401
value@http://local.polymer-chat.com/assets/components.html-13.js:1:3091
value@http://local.polymer-chat.com/assets/components.html-24.js:1:1403
l@http://local.polymer-chat.com/assets/components.html-10.js:1:865
q@http://local.polymer-chat.com/assets/components.html-11.js:1:1075
Pe@http://local.polymer-chat.com/assets/components.html-12.js:1:8626

The error comes after the modules and web components were upgraded and everything worked fine before upgrade.

Why is the roboto font requested? It should not be included anymore since the app uses its own fonts.

• http://localhost:3000/assets/bower_components/font-roboto/roboto.html
• http://localhost:5001/assets/bower_components/font-roboto/fonts/roboto/Roboto-Regular.ttf

Reproduction

• Angular 4.2.3
• IE 11, Edge 14
• Import Intl polyfill (according to Angular Optional browser features to polyfill)

  /* ========= src/polyfills.ts ========= */
  ...
  /**
   * Date, currency, decimal and percent pipes.
   * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
   */
  import 'intl';  // Run `npm install --save intl`.
  /**
   * Need to import at least one locale-data with intl.
   */
  import 'intl/locale-data/jsonp/en-US';

• Use DatePipe to format hours and minutes with HH:mm (according to DatePipe format)

  <!-- ========= message-item.component.html ========= -->
  ...
   <span class="posted">{{message.posted | date:'HH:mm'}}</span>
  ...

Expected output vs Current output

• 2017-06-12 09:03:10 => 09:03 but 09:00:6/12/2017 9:03:10 AM
• 2017-06-12 13:23:30 => 13:23 but 13:00:6/12/2017 1:23:30 PM

Background

According to Angular's browser support guide, different polyfills are required to make Angular applications work on different browsers. In Angular 4, there is an entry, polyfills.ts, to import such required polyfills, and we can add more polyfills imports in it to support more and more browsers.

However, the problem is that more and more polyfills may increase the bundle size and thus affect loading time on the evergreen browsers (the modern and up-to-date ones) even though they're only required for older browsers. (e.g. ES6 polyfill not required on Chrome)

So, our wish is to implement conditional polyfilling, like as Philip Walton introduced in his article: Loading Polyfills Only When Needed. But it seems that there is no legal way with Angular to do that.

if (!es6_native_support) {
  // import es6 polyfills
}

Baseline for Conditional ES6 Polyfilling

• ES6 native support: http://caniuse.com/#search=es6
• Angular mandatory polyfills: https://angular.io/guide/browser-support#mandatory-polyfills

Reproduction

• Angular 4.2.3
• Polymer 2
• Used origami to parse custom CSS variables and mixins in the component style

  /* ========= app.module.ts ========= */
  import {CUSTOM_ELEMENTS_SCHEMA, NgModule} from '@angular/core';
  import {PolymerModule} from '@codebakery/origami';
  ...
  
  @NgModule({
      ...
      imports: [
          ...
          PolymerModule.forRoot(),
          ...
      ],
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
      ...
  })
  ...

• Used CSS-mixins to style <paper-textarea> element in an Angular component

  <!-- ========= angular.component.html ========= -->
  ...
  <paper-textarea class="form-control message-input-field" ...>
  </paper-textarea>
  ...

  /* ========= angular.component.css ========= */
  .message-input-field {
      --paper-input-container-input-color: var(--app-input-color); /* works fine */
      --paper-input-container-underline: { /* NOT working */
          display: none;
      }
      --paper-input-container-underline-focus: { /* NOT working */
          display: none;
      }
      @apply --app-word-wrapping; /* works fine */
  }

  /* ========= document-level styles ========= */
  --app-word-wrapping: {
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-wrap: break-word;
    word-break: break-word;
    -ms-word-break: break-word;
  }

Current output (on the browser's inspector)

--paper-input-container-input-color: var(--app-input-color);
--paper-input-container-underline: {display:none}--paper-input-container-underline-focus:{display:none}overflow-wrap: var(--app-word-wrapping_-_overflow-wrap);
word-wrap: var(--app-word-wrapping_-_word-wrap);
-ms-word-wrap: var(--app-word-wrapping_-_-ms-word-wrap);
word-break: var(--app-word-wrapping_-_word-break);
-ms-word-break: var(--app-word-wrapping_-_-ms-word-break);

Expected output on the inspector

--paper-input-container-input-color: var(--app-input-color);
--paper-input-container-underline_-_display: none;
--paper-input-container-underline-focus_-_display: none;
overflow-wrap: var(--app-word-wrapping_-_overflow-wrap);
word-wrap: var(--app-word-wrapping_-_word-wrap);
-ms-word-wrap: var(--app-word-wrapping_-_-ms-word-wrap);
word-break: var(--app-word-wrapping_-_word-break);
-ms-word-break: var(--app-word-wrapping_-_-ms-word-break);

This does happen only in the production build and everything works fine in the development mode. The production build is configured based on origami's production build guide and enableProdMode() is invoked in the production mode. (See also https://github.com/hotforfeature/origami/tree/master/demo for more detail of my production build configuration)

Not sure if this problem comes from Angular production mode itself or anything else.

Styling paper-textarea doesn't seem to work properly. It works fine on Chrome and FF, but not in Edge (v14.14393) and IE (v11.0.14393.0).

Expected Behavior:

Error Behavior in Edge & IE:

Key changes to style paper-textarea

src/app/message/message-item.component.css

.message-input-field {
    --paper-input-container-input-color: var(--app-color-green); /* NOT working */
    --paper-input-container-underline: { /* NOT working */
        display: none;
    }
    --paper-input-container-underline-focus: { /* NOT working */
        display: none;
    }
    @apply --app-word-wrapping; /* seems working fine */
}

Need to resolve this asap.

If you click on the paper-menu-button to activate paper-menu, and then you won't scroll in the app anymore.

[Related issues]

• PolymerElements/paper-menu-button#125
• PolymerElements/paper-listbox#38
• PolymerElements/iron-dropdown#132
• web-animations/web-animations-js#123

There was a similar issue once with Angular 2 + Polymer 1 and it was resolved after [email protected] was released.