Webpack configuration example

[aptuzz]

Hello,

any hints on how to set-up the project with Webpack?
I'm struggling to find the equivalent of

    document.addEventListener('WebComponentsReady', function() {
        System.import('app').catch(function(err){ console.error(err); });
     });

to ensure the load order.

[httpdigest]

I second this! Definitely need to find a way to use vaadin with Webpack.

[jumper423]

I'm third then!

[jumper423]

There are such package https://github.com/jondum/polymer-loader
But I couldn't figure out how to apply it.

[httpdigest]

Okay, I got an example working. Basically, I just added the necessary elements into the HTML file template finally produced by Webpack and then just called the Angular 2 selector in the body of the HTML. Here is a gist: https://gist.github.com/httpdigest/b81d30bbe3cacabbbc43893a24e99801
It is simply based off https://vaadin.com/elements/-/element/vaadin-grid

[jumper423]

I just do.
But I have to copy everything from the folder bower_components. As the project structure does not allow to attach directly. And in General this is not the best option. Code not beneficiries and so on.

module.exports = {
 ...
  plugins: [
    ....
      new CopyWebpackPlugin([{
            from: 'bower_components',
            to: 'assets/bower'
        }], {
            ignore: [
                '*.scss',
                '*.ts',
                '*.json',
                '*.yml',
                '*.md',
                // '*.svg',
                '*.jpg',
                '*.gif',
                '*.png',
                '*.adoc'
            ]
        }),
   ....
 ],
  link: [
      ....
      {rel: "import", href: "/assets/bower/vaadin-grid/vaadin-grid.html"},
  ]
};

[jumper423]

Here is not the right place to solve.
It must be solved in the repository of the polymer.
https://github.com/Polymer/polymer
https://github.com/Polymer/polymer/search?q=webpack&type=Issues&utf8=%E2%9C%93

[platosha]

@jumper423 you can change the bower directory in .bowerrc:

{
  "directory": "assets/bower/"
}

See: https://bower.io/docs/config/

[jumper423]

@platosha thank you
But still an open question. How to connect them as needed? And I don't like when connecting a huge number of files. Currently not needed.

[platosha]

@jumper423 how about using vulcanize? It can bundle all the HTML Imports you use with their dependencies into a single HTML file, which you can then feed to webpack.

[jumper423]

@platosha There is an example?

[httpdigest]

Vulcanize is the tool! :) @jumper423 as for an example:

$ npm install vulcanize --save-dev
$ node_modules/.bin/vulcanize index.html -o out.html

Of course you can also add a script to package.json:

"scripts": {
"vulcanize": "vulcanize"
}

index.html is supposed to be your html file with the imports of the vaadin component html files. The output is the out.html with all such components concatenated into your html file.

[httpdigest]

Okay, I just found that it does not work with Vulcanize out of the box. Vulcanize includes the HTML files and the referenced JavaScript files, but it does not remove the "src" attribute of the inlined <script> elements. This leads Chrome to think that it should download the script. The problem is with the vaadin-grid/vaadin-grid.html file which references "vaadin-grid.min.js". After vulcanize ran over this, it will inline the script but will keep a "src" attribute pointing to "bower_components/vaadin-grid/vaadin-grid.min.js" on the script element. This leads Chrome to wanting to download this script, which it will not find, since the whole point was to not have the bower_components folder distributed.
When I remove the "src" attribute (because the script has already been inlined), everything works.

EDIT: --inline-scripts did the trick. I wonder why it is called like that, however, since vulcanize always does inline scripts. This flag only seems to remove the "src" attribute of an already inlined script element.

[5amfung]

Now that angular-cli is about switching to webpack. I was able to migrate my project to webpack but when I run ng serve, I get this at the end of ng serve.

WARNING in ./~/@vaadin/angular2-polymer/index.js
Cannot find source file 'index.ts': Error: Can't resolve './index.ts' in '/Users/bbpan/src/infocery-partner-ui/node_modules/@vaadin/angular2-polymer'
 @ ./src/app/app.component.ts 12:0-58
 @ ./src/app/index.ts
 @ ./src/main.ts
 @ multi main

WARNING in ./~/@vaadin/angular2-polymer/src/polymer-element.js
Cannot find source file 'polymer-element.ts': Error: Can't resolve './polymer-element.ts' in '/Users/bbpan/src/infocery-partner-ui/node_modules/@vaadin/angular2-polymer/src'
 @ ./~/@vaadin/angular2-polymer/index.js 2:24-56
 @ ./src/app/app.component.ts
 @ ./src/app/index.ts
 @ ./src/main.ts
 @ multi main
Child html-webpack-plugin for "index.html":
         Asset     Size  Chunks       Chunk Names
    index.html  2.47 kB       0       
webpack: bundle is now VALID.

[leonelgoncalves]

@httpdigest Hi, how you managed to import all the files? I try to import all the dependencies listed in the Angular 2 tutorial page for vaadin in a import file and then i vulcanize this file. And finally I'm requiring the vulcanized file. And i always get a Polymer error.

TypeError: undefined is not an object (evaluating 'Polymer.Settings').

Did you encounter with an error like this?.

Thanks in advance.

[vitoexe]

@5amfung to eliminate Webpack warning try add line in webpack.common.js file

preLoaders: [
  {
    exclude: [...
      helpers.root('node_modules/@vaadin/angular2-polymer'),

[Chabane]

@vitoexe angular-cli not provides a webpack.common.js file.

[Richard87]

Hi all,

What is currently the best way to load vaadin/angular2-polymer in angular-cli@webpack projects?

[vitoexe]

angular-cli@webpack

@Richard87 My solution is:

launch Angular from main.ts after WebComponentsReady by require

document.addEventListener('WebComponentsReady', function () {
    require('./main-after-listener.ts');
});

main-after-listener.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule, environment } from './app/';

if (environment.production) {
  enableProdMode();
}



platformBrowserDynamic().bootstrapModule(AppModule);

This is work also in Firefox.

Temporary solution to eliminate WARNING in ./~/@vaadin/angular2-polymer/index.js in node_modules/angular-cli/addon/ng2/models/webpack-build-common.ts You can add

      preLoaders: [
        {
          exclude: [
            path.resolve(projectRoot, 'node_modules/@vaadin/angular2-polymer'),

But this is bad solution! This should be added outside node_modules

[platosha]

There is a guide for Angular CLI Webpack projects. Please see: https://github.com/vaadin/angular2-polymer/blob/master/docs/ng-cli-webpack.adoc for the complete step-by-step instructions.

cc @cementito @Richard87 @liongoncalves

[5amfung]

@liongoncalves Running on Chrome has no problem, but I got your same Polymer.Settings error when running on Safari on Mac. Were you able figure out how to fix the problem?

And I'm using this approach to bootstrap my app.

document.addEventListener('WebComponentsReady', function () {
    require('./main-after-listener.ts');
});

[mfdeveloper]

Hello @platosha ! This documentation link is "out of date". The directory public was changed to assets on angular-cli. I did a pull request !84 to fix some steps on this doc!

Futhermore, when you perform ng build all dependencies on src/assets/bower_componets are present on dist directory, even whether is not used 😞

[ythanaseelan]

@5amfung @liongoncalves Did you figure out the TypeError: undefined is not an object (evaluating 'Polymer.Settings') issue?

[cdupetit]

@ythanaseelan I have the same error. Any idea ?

[ythanaseelan]

@cdupetit The issue happens for me only for jasmine testing with phantomjs. Couldnt get any workaround for that. So I ended up not accessing the polymer components in the jasmine tests and limited my testing only to the code written for Angular layer.

[quentinchap]

@liongoncalves same issue just on safari on my website (http://quentinchapelle.com) and for the moment i haven't find any solution :(

Edit: problem solve thank to #57 there is a guide here to resolve this problem https://github.com/vaadin/angular2-polymer/blob/master/docs/ng-cli-webpack.adoc

[aruntk]

I've built a package to handle polymer/webcomponents files and html imports (with code reload support) https://github.com/aruntk/wc-loader. check out.