Good day,
I'm following this tutorial but, having some issues with Vaadin integrated with Angularjs2 (Joomla Backend project). Getting this error:
polymer-micro.html:196 Uncaught TypeError: Cannot read property 'instanceCount' of undefined
at HTMLStyleElement.createdCallback (polymer-micro.html:196) createdCallback @ polymer-micro.html:196
polymer-micro.html:118 Uncaught TypeError: Cannot read property '_makeReady' of undefined
at polymer-micro.html:118 (anonymous) @ polymer-micro.html:118 index.php?option=com_stackcommerce:57
ZoneAwareError {stack: "(SystemJS) Cannot read property 'useShadow' of und… nts/com_stackcommerce/assets/dist/dev/app/main.js", message: "(SystemJS) Cannot read property 'useShadow' of und… nts/com_stackcommerce/assets/dist/dev/app/main.js", originalStack: "Error: (SystemJS) Cannot read property 'useShadow'…/assets/node_modules/zone.js/dist/zone.js:349:25)", zoneAwareStack: "Error: (SystemJS) Cannot read property 'useShadow'… ode_modules/zone.js/dist/zone.js:349:25) [<root>]", name: "Error"…}
(anonymous) @ index.php?option=com_stackcommerce:57 ZoneDelegate.invoke @ zone.js:242 Zone.run @ zone.js:113 (anonymous) @ zone.js:535 ZoneDelegate.invokeTask @ zone.js:275 Zone.runTask @ zone.js:151 drainMicroTaskQueue @ zone.js:433 ZoneTask.invoke @ zone.js:349
This is my index.php file:
// No direct access
defined('_JEXEC') or die;
$document = JFactory::getDocument();
$document->setBase(JURI::base());
$document->addScript(JUri::root() . 'administrator/components/com_stackcommerce/assets/bower_components/webcomponentsjs/webcomponents.min.js');
$document->addScript(JUri::root() . 'administrator/components/com_stackcommerce/assets/node_modules/core-js/client/shim.min.js');
$document->addScriptDeclaration("window.Polymer = {dom: 'shadow'};");
$document->addScript(JUri::root() . 'administrator/components/com_stackcommerce/assets/node_modules/zone.js/dist/zone.js');
$document->addScript(JUri::root() . 'administrator/components/com_stackcommerce/assets/node_modules/reflect-metadata/Reflect.js');
$document->addScript(JUri::root() . 'administrator/components/com_stackcommerce/assets/node_modules/systemjs/dist/system.src.js');
$document->addHeadLink(JUri::root().'administrator/components/com_stackcommerce/assets/bower_components/iron-flex-layout/iron-flex-layout.html',"import","rel",array());
$document->addHeadLink(JUri::root().'administrator/components/com_stackcommerce/assets/bower_components/paper-styles/color.html',"import","rel",array());
$document >addHeadLink(JUri::root().'administrator/components/com_stackcommerce/assets/bower_components/paper-styles/default-theme.html',"import","rel",array());
$document >addHeadLink(JUri::root().'administrator/components/com_stackcommerce/assets/bower_components/paper-styles/typography.html',"import","rel",array());
$document >addHeadLink(JUri::root().'administrator/components/com_stackcommerce/assets/bower_components/paper-styles/shadow.html',"import","rel",array());
//$document->addStyleDeclaration();
?>
<style is="custom-style">
body {
@apply(--layout-fullbleed);
@apply(--paper-font-body1);
background: var(--primary-background-color);
color: var(--primary-text-color);
}
</style>
<?php
$document->addHeadLink(JUri::root().'administrator/components/com_stackcommerce/assets/bower_components/iron-icons/iron-icons.html',"import","rel",array());
$document->addHeadLink(JUri::root().'administrator/components/com_stackcommerce/assets/bower_components/app-layout/app-layout.html',"import","rel",array());
$document->addHeadLink(JUri::root().'administrator/components/com_stackcommerce/assets/bower_components/paper-icon-button/paper-icon-button.html',"import","rel",array());
$document->addHeadLink(JUri::root().'administrator/components/com_stackcommerce/assets/bower_components/paper-input/paper-input.html',"import","rel",array());
$document->addHeadLink(JUri::root().'administrator/components/com_stackcommerce/assets/bower_components/vaadin-grid/vaadin-grid.html',"import","rel",array());
$document->addHeadLink(JUri::root().'administrator/components/com_stackcommerce/assets/bower_components/vaadin-date-picker/vaadin-date-picker.html',"import","rel",array());
$document->addScript(JUri::root() . 'administrator/components/com_stackcommerce/assets/node_modules/systemjs/dist/system.src.js');
$document->addScript(JUri::root() . 'administrator/components/com_stackcommerce/assets/src/systemjs.config.js');
$document->addScriptDeclaration("document.addEventListener('WebComponentsReady', function() { System.import('app').catch(function(err){ console.error(err); });});");
?>
<my-app>Loading...</my-app>
This is my systemjs.conf.js
(function(global) {
var paths = {
'npm:': 'components/com_stackcommerce/assets/node_modules/'
};
var map = {
app: 'components/com_stackcommerce/assets/dist/dev/app',
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
'@vaadin/angular2-polymer': 'npm:@vaadin/angular2-polymer'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
app: {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
},
'angular2-in-memory-web-api': {
main: './index.js',
defaultExtension: 'js'
},
'@vaadin/angular2-polymer': {
main: './index.js',
defaultExtension: 'js'
}
};
var config = {
paths: paths,
map: map,
packages: packages
};
System.config(config);
})(this);
The specific error I'm getting from within my browser when I run the application.
It seems to me that something is wrong with the scripts/imports order.
The cause is, probably, that Joomla has separate insertion points in the document head for <link> and <script> tags in its fixed order. Therefore, all the <link> tags you add with addHeadLink are placed before any <script> added with addScript and addScriptDeclaration methods.
I would suggest to change your index.php so that all the Angular and Polymer imports / initial settings code is inserted as a single HTML piece. This way things should stay in correct order.