2017-01-20 10 views
0

良い一日、Angularjs 2/Vaadin

私はこのtutorialに従うが、Angularjs2(Joomlaのバックエンドプロジェクト)と統合Vaadinといくつかの問題を抱えています。このエラーを取得:

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 

これは私のindex.phpファイルです:

// 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> 

これは私の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); 

私は内から取得しています特定のエラーですアプリケーションを実行すると私のブラウザ。

答えて

1

スクリプト/インポートオーダーに何か問題があるようです。

おそらくJoomlaは文書の先頭に別々の挿入ポイントを<link><script>というタグで固定しています。したがって、addHeadLinkで追加する<link>タグはすべて、およびaddScriptDeclarationメソッドが追加された<script>の前に配置されます。

AngularとPolymerのインポート/初期設定コードがすべて1つのHTMLファイルとして挿入されるように、index.phpを変更することをお勧めします。このようにして、正しい順序で処理する必要があります。