Sample project not running in ie11 windows 7

rakesh-barla commented 8 years ago

I am trying to run the following sample project : https://github.com/montyr75/pdcl_first_elements

Its working in Chrome and Firefox but not working in IE 11.

In F12 developer tools console it giving this error :

File: index.bootstrap.initialize.dart.js, Line: 1483, Column: 15

I checked IE 11 on browserstack also, same issue.

I am using Eclipse Mars IDE.

So i tried a new project like below :

Pubspec.yaml

name: polymerdartsample
version: 1.0.0
author: tester
description: Sample web application
environment:
  sdk: '>=1.12.0 <2.0.0'
documentation: none
dependencies:
  polymer: 1.0.0-rc.15
  polymer_elements: 1.0.0-rc.8
  web_components: 0.12.2+2
transformers:
- polymer:
    entry_points: web/index.html

in index.html

<!DOCTYPE html>
<html>
<head>  
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src='packages/web_components/webcomponents-lite.js'></script>  
<link rel="import" href="packages/polymer_elements/roboto.html">
<title>Test Data</title>
</head>
<body unresolved>
<main-app></main-app>     
<script type="application/dart" src="index.dart"></script>
<script src="packages/browser/dart.js"></script>
</body>
</html>

in index.dart

library polymerdartsample.web.index;
import 'package:polymerdartsample/main_app.dart';
import 'package:polymer/polymer.dart';
import 'dart:html';

main() async {
  await initPolymer();
}

in lib/main_app.html :

<dom-module id="main-app">
    <template>

        <h3>Hello world</h3>

    </template>
</dom-module>

in lib/main_app.dart :

@HtmlImport('main_app.html')

library polymerdartsample.lib.main_app;

import 'package:polymer/polymer.dart';
import 'package:web_components/web_components.dart';

@PolymerRegister('main-app')
class MainApp extends PolymerElement {

  MainApp.created() : super.created();

}

When I run this I get the same error in IE 11.

please help...

jnelso99 commented 8 years ago

I was able to replicate this. Using the code in the OP (including pubspec library versions), I get this stack trace (as best as I could copy from IE11...)

_IsolateContext.eval$1 [Line: 468, Col: 29], isolate_helper.dart _callInIsolate [Line: 53, Col: 1], isolate_helper.dart Anonymous function [Line: 2375, Col: 7], js_helper.dart Anonymous function [Line: 2395, Col: 14], js_helper.dart

It is referencing "_globalState.rootContext" where "_globalState" is undefined.

I also get this using the default Dart Polymer project created by IntelliJ.

Windows 8.1 IE 11.0.9600.18161 IntelliJ IDEA 15.0.3 Dart 1.14.1 (will try 1.14.2 when I get a chance to see if this still occurs there)

jakemac53 commented 8 years ago

It looks like this does work if you use the full polyfill (webcomponents.js not webcomponents-lite.js).

jakemac53 commented 8 years ago

Looks like this is caused by the template element not existing on IE. The full polyfill adds it which is why that works, where the lite version doesn't do a full polyfill.

jakemac53 commented 8 years ago

Looks like including the full polyfill only makes things work until you actually use an element which extends TemplateElement, at which point it will still fail (see polymer stagehand app for instance).

jptrainor commented 8 years ago

I have the same stack trace (terminating in isolate_helper.dart:468) when I run a combined Dart + Polymer/JS application in the iOS 9.2 WKWebView. This code works perfectly on Safari Desktop and Mobile when loaded as a normal web page. The problem appears only in WKWebView. Note, I am running the code in Cordova and everything is loaded via file://, however, WKWebView has an issue whereby it refuses to perform a file: XHR request. That means that the web component polyfil cannot load linked html components as it normally would. The work arounds are i) run a internal web server, or ii) vulcanize index.html to pull all components into a single file so that no file:// XHR is necessary to load them. I only get this error if I use approach ii - vulcanizing the elements into index.hml. The Polymer code appears to start up just fine. It's just the dart code that breaks. If I run an embedded web server in the iOS app, and the WKWebView loads via that, then everything is fine with both Polymer and Dart (although that has other issues, and is not a permanent solution). While this is not the particular bug you are tracking here, it seems related.

The error occurs even if I exclude my dart code from the vulcanized index.html so that it loads via a normal script tag. I'm running Dart 1.15.0. Also, I'm using csp output from dart2js.

Is the root problem known for this bug?

jobukkit commented 8 years ago

I based my app on the Stagehand one, so now it doesn't work in Internet Explorer even though I'm not using <template> anywhere else. How do I move everything out of the template and put it in the main page?

jakemac53 commented 7 years ago

I have created a standalone repro of this here, https://github.com/jakemac53/extend-template-repro/. It looks like a dart2js/dart:html issue. @sigmundch

sigmundch commented 7 years ago

I finally landed a fix in dart2js/dart:html to make it feasible to use the webcomponents-lite polyfill on IE11. I noticed also that the polyfill had a bug that was fixed in it's version 7.22, I was about to roll the polyfills today but Matias just did it :)

Combining the two fixes makes both the repro and the stagehand example work on IE11!

Fixes have landed in the source tree, they will be available on the next release of the sdk and the web components package. That should be:

version 1.21.0-dev.7.0 of the SDK (likely in a week)
version 1.12.4 of the web_components package (any time now)

dart-archive / polymer-dart

Sample project not running in ie11 windows 7 #682