在angular2种子项目中整合vaadin元素

您好，我一直在angular2种子项目中集成vaadin元素时遇到问题.vaadin 伙计们建议在systemjs.config中升级.js像这样提到vaadin元素的路径名

  // map tells the System loader where to look for things
var map = {
'@vaadin':                    'node_modules/@vaadin'
};
  // packages tells the System loader how to load when no filename and/or no extension
var packages = {
'@vaadin/angular2-polymer':   { main: 'index.js', defaultExtension: 'js' }
};

我在种子项目的tools/config/project.config.ts文件中进行了这些指定的更改

 this.SYSTEM_CONFIG_DEV.paths['@vaadin'] =
    `${this.APP_BASE}node_modules/@vaadin`;
this.SYSTEM_BUILDER_CONFIG.packages['@vaadin/angular2-polymer'] = {
    main: 'index.js',
    defaultExtension: 'js'
};

但是我收到此错误

Error: Error: XHR error (404 Not Found) loading http://localhost:5555/node_modules/@vaadin/package.json(…)

有人可以告诉我我应该做出哪些改变，以将vaadin聚合物元素整合到angular2-seed项目中。谢谢

我可以通过在project.config.ts中包含以下代码来解决此问题

this.SYSTEM_CONFIG_DEV.paths['@vaadin/angular2-polymer'] =
  `${this.APP_BASE}node_modules/@vaadin/angular2-polymer`;
this.SYSTEM_CONFIG_DEV.packageConfigPaths =
  this.SYSTEM_CONFIG_DEV.packageConfigPaths.concat([
    `${this.APP_BASE}node_modules/@vaadin/*/package.json`
  ]);
this.SYSTEM_BUILDER_CONFIG.packages['@vaadin/angular2-polymer'] = {
  main: 'index.js',
  defaultExtension: 'js'
}

必须编辑索引.html以包含聚合物库。这是我的索引.html。

<!DOCTYPE html>
<html lang="en">
<head>
  <base href="<%= APP_BASE %>">
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title><%= APP_TITLE %></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- inject:css -->
  <!-- endinject -->
    <script src="ext-libs/webcomponentsjs/webcomponents-lite.min.js"></script>

    <link rel="import" href="ext-libs/iron-flex-layout/iron-flex-layout.html">
    <link rel="import" href="ext-libs/paper-styles/color.html">
    <link rel="import" href="ext-libs/paper-styles/default-theme.html">
    <link rel="import" href="ext-libs/paper-styles/typography.html">
    <link rel="import" href="ext-libs/paper-styles/shadow.html">
    <style is="custom-style">
        body {
        @apply(--layout-fullbleed);
        @apply(--paper-font-body1);
            background: var(--primary-background-color);
            color: var(--primary-text-color);
        }
    </style>

    <link rel="import" href="ext-libs/iron-icons/iron-icons.html">
    <link rel="import" href="ext-libs/app-layout/app-layout.html">
    <link rel="import" href="ext-libs/paper-icon-button/paper-icon-button.html">
    <link rel="import" href="ext-libs/paper-input/paper-input.html">
    <link rel="import" href="ext-libs/vaadin-grid/vaadin-grid.html">
    <link rel="import" href="ext-libs/vaadin-date-picker/vaadin-date-picker.html">

    <script>
        // Fixes undefined module function in SystemJS bundle
        function module() {}
    </script>
    <!-- shims:js -->
    <!-- endinject -->
    <% if (ENV === 'dev') { %>
    <script>
        System.config(<%=
                JSON.stringify(SYSTEM_CONFIG, null, 2)
                %>)
    </script>
    <% } %>
    <!-- libs:js -->
    <!-- endinject -->
    <!-- inject:js -->
    <!-- endinject -->
    <% if (ENV === 'dev') { %>
    <script>
        System.import('<%= BOOTSTRAP_MODULE %>')
                .catch(function (e) {
                    console.error(e,
                            'Report this error at https://github.com/mgechev/angular2-seed/issues');
                });
    </script>
    <% } %>
    <script>
        document.addEventListener('WebComponentsReady', function() {
            System.import('app').catch(function(err){ console.error(err); });
        });
    </script>
</head>
<body>


  <sdp-app>Loading...</sdp-app>

</body>
</html>

相关内容

最新更新

热门标签：