在 angular2-seed 项目中集成 vaadin 元素

Question

你好，我在 angular2 seed 中集成 vaadin 元素时遇到了一个问题 project.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-polymer 元素集成到 angular2-seed project.Thanks

Answer 1

我可以通过在 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'
}

Answer 2

必须编辑 index.html 以包含聚合物库。这是我的 index.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>

在 angular2-seed 项目中集成 vaadin 元素

Integrating vaadin elements in angular2-seed project

vaadin

angular