Angularjs 2/ 瓦丁

Question

美好的一天，

我正在关注这个 tutorial 但是，Vaadin 与 Angularjs2（Joomla 后端项目）的集成存在一些问题。收到此错误：

 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);

当我运行应用程序时，我从浏览器中得到的特定错误。

Answer 1

在我看来 scripts/imports 命令有问题。

原因可能是 Joomla 在文档头部以固定顺序为 <link> 和 <script> 标签设置了单独的插入点。因此，您使用 addHeadLink 添加的所有 <link> 标记都放置在使用 addScript 和 addScriptDeclaration 方法添加的任何 <script> 之前。

我建议更改您的 index.php，以便将所有 Angular 和 Polymer 导入/初始设置代码作为单个 HTML 片段插入。这样事情应该保持正确的顺序。

Angularjs 2/ 瓦丁

Angularjs 2/ Vaadin

vaadin

typescript

polymer

systemjs

angular