The bundled result of `gulp build` is not running of Safari.
talmog opened this issue · comments
Hi Antony,
Issue Overview
The bundled result of gulp build is not running of Safari.
Gulp build bundle.js generates an error on Safari
Reproducables
Steps to reproduce:
- Use a fresh install of the starter
- run gulp build
- load build/index.html (via server or any other way) with Safari
- view Error:
TypeError: Attempting to configurable attribute of unconfigurable property.and
ReferenceError: Can't find variable: System - As a result the app is not loading.
I believe it is related to es-shim, but I am not sure.
Information
| Operating System | OSX |
| Node version | 5.2 |
| NPM Version | 3.5.3 |
| Environment | Safari |
We are building a large size app using your great starter and this is crucial for us!!!
Thank you so much
Tomer
Hi, did it only happen using Safari? how about other browsers?
you can try SystemJS polyfills here
By the way I'm going to switch to SFX build (no systemjs in bundle) soon, can you try the sfx-build-2 branch and test against Safari?
Thanks for the report.
Thank you for your prompt response.
The error does happen only in Safari.
SystemJS polyfills are not solving the problem here.
Also the new SFX branch has the same error and an additional one:
reflect-metadata shim is required when using class decorators
By the way, it was working until beta.17
I don't know much about the reason but this might work.
I have inserted two js in the index.html right before System.import
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
Is node_modules/angular2 folder there? isn't it now node_modules/@angular?
Sorry, I haven't tried rc1 yet. but you can do similar things.
I'll give it a try
Still getting the same error :(
how about gulp serve-dev? is it only not working when bundled?
already try https://github.com/stefanpenner/es6-promise before systemjs script tag?
gulp serve-dev works fine on Safari. it is the bundle that breaks.
Es6-promise didn't help either. I also tried es6-sham, es5-shim and es5-sham.
I tried the angular-cli new tool and it's build does run on safari. I really don't want to migrate the project there, and rather just find a solution for this problem with your starter.
okay, can you try to turn off either minify or mangle option in gulp.config.js file?
I tried it before, just tried it again. no success.
I get it working by removing
<script src="node_modules/es6-shim/es6-shim.min.js"></script>Looks like I need to remove it in next release and just ask the IE users to add them manually
but then you get many other errors...
what kind of error did you get?
I used sfx-build-2 branch and just comment out es6-shim part in index, then serve build it, it run well on Safari Version 9.0 (11601.1.56)
I'd suggest to update your Safari version
When you remove the es6-shim, then the regular un-bundled version doesn't load (on sfx-build-2).
Also I get the same error when I build.
For my project also the bundled version generates many other errors if I don't include the es6-shim.
Sorry, this is a hard one!
Sorry, cannot help much without details and not reproducable in my side since it's indeed working.
I will leave it open for someone else having same issue or fix
I have the same issue. With these included
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.js"></script>
serve-dev works in all browsers, however serve-build breaks things in Safari and IE. If I remove es6-shim Safari works fine but IE is broken with the error
cannot redefine non-configurable property 'Reflect'
Feel free to open PR if you have a fix for this, thank you.
P.S: I still recommend using newer or modern browsers if possible, and I personally don't feel like supporting older IE browsers
The only way I can get it to work is too not bundle those scripts so it must be something to do with systemjs-builder but no idea what.
I checked out rc1 and the issue today.
When I tested removing es6-shim from bundle.js and adding it manually in the build directory, the error was gone.
Uglifying es6-shim might have a problem. and 0.35.1(latest) was the same.
Anyway, from this idea, I adjusted es6-shim's position after system.js and used es6-shim.js instead of es6-shim.min.js. That was a solution(walkaround).
<!-- 1. Load libraries -->
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.js"></script>
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/es6-shim/es6-shim.js"></script>
<!-- endbuild -->
I'll PR this soon.
--- update ---
Changing es6-shim.min.js to es6-shim.js was not necessary.
wow, it's great @kennyhyun , I look forward to it
@talmog , can you confirm the fix?
Works for me.
confirmed! thank you!