Firefox/IE11 - Angular-cli@Webpack & Polymer - TypeError: Polymer is undefined

[Chabane]

Hi,

Project created using angular-cli@webpack would return the following errors when running ng serve, in Firefox and IE11.

1. OS? Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)
   Windows 7
2. Versions. Please run ng --version. If there's nothing outputted, please run
   in a Terminal: node --version and paste the result here:
   v6.3.1
3. Repro steps. Was this an app that wasn't created using the CLI? What change did you
   do on your code? etc.
4. The log given by the failure. Normally this include a stack trace and some
   more information.

TypeError: Polymer is undefined

main.bundle.js:74673 webpack_require() inline.js:53 main.bundle.js:14863 webpack_require() inline.js:53 main.bundle.js:64712 webpack_require() inline.js:53 main.bundle.js:64699 webpack_require() inline.js:53 main.bundle.js:64875 webpack_require() inline.js:53 main.bundle.js:64140 webpack_require() inline.js:53 main.bundle.js:64195 webpack_require() inline.js:53 main.bundle.js:49483 webpack_require() inline.js:53 main.bundle.js:79944 webpack_require() inline.js:53 webpackJsonpCallback() inline.js:24

1. Mention any other details that might be useful.

How can I do without using document.addEventListener('WebComponentsReady', function() [..] in index.html?

I put something like that into index.html :

<script> window.Polymer = window.Polymer || {}; window.Polymer.dom = 'shadow'; </script>

But I got this error :
TypeError: Polymer.Settings is undefined

Without SystemJS, I can't use webcomponents. Tutorial

[filipesilva]

#1747 is out on the next release and should make it easier to add global scripts. I can't really help you with a specific tutorial though, you'll have to ask whoever wrote it.

[cmargulhano]

I spend 5 days to solve this.
To bad its to late but I solved it doing this:

1. Create this file src/main-polymer.ts with this lines:

document.addEventListener('WebComponentsReady', () => {
require('./main.browser.ts'); // Pay attention: Can be main.ts (depends of you configurations)
});

2. in you webpack.config.js (Pay attention: or in other files depends of your custom configuration of webpack.)

• From:
  ...
  new CopyWebpackPlugin([
  { from: 'src/assets', to: 'assets' },
  { from: 'src/meta'}
  ]),
  ...
  entry: {
  'polyfills': './src/polyfills.browser.ts',
  'vendor': './src/vendor.browser.ts',
  'main': './src/main.browser'
  },
  ...

• To:
  ...
  new CopyWebpackPlugin([
  { from: 'src/assets', to: 'assets' },
  { from: 'node_modules', to: 'node_modules' },
  { from: 'bower_components', to: 'bower_components' },
  { from: 'src/meta'}
  ]),
  ...
  entry: {
  'polyfills': './src/polyfills.browser.ts',
  'vendor': './src/vendor.browser.ts',
  'main': './src/main-polymer.ts'
  },
  ...

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}