angular-polymer
angular-polymer copied to clipboard
platosha
How to get a build version of polymer components ?
In order to work with angular-cli , there is a suggestion to change the bower path to assets/bower_components. So this will work and all the bower components will be part of the build.
.bowerrc
{
"directory" : "src/assets/bower_components"
}
But ng build just copies the whole assets folder and all the files, bower_components folder itself is copied as it is. This will create a large size for the application. For a mobile hybrid application, this will lead to packaging issues.
For just include a polymer calendar component the app size increased up to 30 MB.
-
So how to get the files only required for the application, (eliminate demo, test etc from bower_components) along with angular-cli ng build ?
-
Or is there any separate gulp task to do this polymer component building ? It can be integrated to ng build ?
Keep in mind that when a browser (including mobile) is served the app, the entire bower_components folder is not served, only the individual imported files. So your actual app size in terms of data use may be lower than you realize.
At the moment though, I'm not aware of any tooling or task that's been created to build/concat/minify Polymer html imports within Angular. That's on everyone's mind, but I think it's lower priority compared to getting Polymer itself working fully.
@hotforfeature Correct, the actual app loaded in the browser will be what it is required.
But the issue is, polymer components using server space and in mobile building, the app size actually matters.
@sarathsaleem try $ polymer build from polymer-cli https://github.com/Polymer/polymer-cli#build. Given your index.html, it should combine all the HTML imports.
If not enough, using polymer-bundler directly with --inline-styles --inline-css --strip-comments arguments might help: https://github.com/Polymer/polymer-bundler
@hotforfeature But one problem would still be that the web app would do individual reqeusts for every import right? So quite a lot if we are using http1 @platosha good suggestions will try this as well. This would solve the problem with the individual imports as well, right?
That's right, though there's quite a lot of HTTP2 support. Only IE11 on Windows 8/lower and Safari on OS X lower than 10.11 do not support it: http://caniuse.com/#feat=http2
The Polymer CLI can generate bundled and unbundled versions and they recommend serving an appropriate version based on browser HTTP2 support.
@hotforfeature that is true. But we have an iOS app that access the app over WKWebView. That does not support http2 UPDATE: It does support http2 starting iOS 9
@BorntraegerMarc not sure what is the problem with individual imports. polymer-bundler (and it’s shortcut $ polymer build as well) scans the given source.html and recursively combines all the html imports, so that in the output.html there are no html imports at all (just their contents).
Sorry, wasn't clear enough @platosha. I meant individual http requests. But I think it would solve it. I'll try and get back at you
Hmm, @platosha I'm getting an error. This is how I do the build:
- run
polymer build --entrypoint index.html - manually copy over the webpack generated
bundle.js
this is the error I get:
zone.js?fad3:25 Uncaught Error: Zone already loaded.
Unhandled Promise rejection: Zone.js has detected that ZoneAwarePromise (window|global).Promise has been overwritten.
Error: Uncaught (in promise): Error: Zone.js has detected that ZoneAwarePromise (window|global).Promise has been overwritten.
When I run the app in the browser.
I mean call me crazy but I still see after the build that the app does like 140 requests... Any ideas?
Ah, OK I think I fixed the error. But the app still does 140 requests. But I'll open a issue over at the polymer build project
Ah, no I just copied over the wrong JS file. Sorry, the error still persists...
yeah @platosha after running ng build and then polymer build --entrypoint index.html it somehow breaks the source files. So I get the error after the second command. Because the polymer build somehow copies/edits the generated bundle.js file. So the error certainly is because of the angular/polymer interaction
@BorntraegerMarc could you try:
- move all html imports from index.html to elements.html
-
polymer build --entrypoint elements.html - import elements.html in your index.html?
Hope that isolates side-effects of polymer build to not affect angular’s index.html that much.
@platosha That did the trick for the 140 requests. Now I only see 9 requests left. But I still see the same error.
Also from the network tab I see that the angular bundle.js is imported twice. Do you have the same problem?
and also interesting:
If I change in the index.html the one line:
<link rel="import" href="./build/bundled/elements.html"> to <link rel="import" href="./build/unbundled/elements.html">
Then it works! I guess the problem is with shared-bundle.html But I don't really see from where that request comes from
@platosha and one additional error came up when using the paper-icon-button:
web-animations-next-lite.min.js:2 Uncaught TypeError: Cannot assign to read only property 'target' of object '#<AnimationPlaybackEvent>' at e.Animation.<anonymous> (web-animations-next-lite.min.js:2)
I never saw something like this also googling did not really bring me any further...
UPDATE: The error was caused by something else
To clarify: bundled version is not working but unbundled version is working fine.
Working on something now to solve https://github.com/Polymer/polymer-cli/issues/283 @platosha or @hotforfeature did you manage to solve the "add hash to file" problem when running the polymer build?
Another update: If you configure your own polymer-build it works fine. Something like this: https://github.com/PolymerElements/generator-polymer-init-custom-build/tree/master/generators/app