Kendo UI角2框架-图表组件错误

Question

我已经使用以下技术建立了一个基本的角2应用程序：angular.io/docs/ts/latest/quickstart.html

我使用以下技术将Kendo添加到我的应用程序中：www.telerik.com/kendo-angular-ui/getting-started (使用Quickstart方法)

Kendo按钮显示并按预期工作。现在，我想使用以下技术添加Kendo用户界面图：www.telerik.com/kendo-angular-ui/components/charts/#installation

这在我的Chrome浏览器(54.0.2840.71m版)的控制台窗口中引起了以下错误：

//localhost:3002/@progress/kendo-angular-charts 404 (未找到) 错误：(SystemJS) XHR错误(404未找到)加载SystemJS

我是否需要在system.config.js中为我的图表组件提供参考/定义？不确定，因为Kendo安装文档没有提到它。我确实看到了一些关于按钮的东西，尽管如此.让我们把它加进去。

​

    (function (global) {
      System.config({
        paths: {
          // paths serve as alias
          'npm:': 'node_modules/'
        },
        // map tells the System loader where to look for things
        map: {
          '@progress/kendo-angular-buttons': 'npm:@progress/kendo-angular-buttons',
          '@progress/kendo-angular-charts': 'npm:@progress/kendo-angular-charts',
          // our app is within the app folder
          app: 'app',
          // angular bundles
          '@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',
          '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
          // other libraries
          'rxjs':                      'npm:rxjs',
          'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
          'npm:@progress/kendo-angular-buttons': {
               main: './dist/npm/js/main.js',
               defaultExtension: 'js'
             },
          'npm:@progress/kendo-angular-charts': {
               main: './dist/npm/js/main.js',
               defaultExtension: 'js'
             },
          app: {
            main: './main.js',
            defaultExtension: 'js'
          },
          rxjs: {
            defaultExtension: 'js'
          }
        }
      });
    })(this);

​

现在，我在控制台中得到以下错误：

获取//localhost:3002/@progress/kendo-angular-popup 404 (未找到)获取//localhost:3002/@progress/kendo-angular-resize-sensor 404 (未找到)错误：(SystemJS) XHR错误(未找到)加载//localhost:3002/@progress/kendo-angular-popup(…)获取//localhost:3002/@progress/kendo图404 (未找到) GET //localhost:3002/@ //localhost:3002/@progress/kendo-angular-resize-sensor / 404 (未找到)获取//localhost:3002/@progress/kendo-angular-resize-sensor 404 (未找到)

因此，现在我想我需要向system.config.js添加更多的这些引用/定义。所以我做了，现在我有了这个：

​

(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      '@progress/kendo-angular-buttons': 'npm:@progress/kendo-angular-buttons',
      '@progress/kendo-angular-charts': 'npm:@progress/kendo-angular-charts',
      '@progress/kendo-charts': 'npm:@progress/kendo-charts',
      '@progress/kendo-angular-popup': 'npm:@progress/kendo-angular-popup',
      '@progress/kendo-angular-resize-sensor': 'npm:@progress/kendo-angular-resize-sensor',
      '@progress/kendo-angular-intl': 'npm:@progress/kendo-angular-intl',
      '@progress/kendo-popup-common': 'npm:@progress/kendo-popup-common',
      '@progress/kendo-drawing': 'npm:@progress/kendo-drawing',
      '@telerik/kendo-intl': 'npm:@telerik/kendo-intl',
      '@telerik/kendo-draggable': 'npm:@telerik/kendo-draggable',
      // our app is within the app folder
      app: 'app',
      // angular bundles
      '@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',
      '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      'npm:@progress/kendo-angular-buttons': {
           main: './dist/npm/js/main.js',
           defaultExtension: 'js'
         },
      'npm:@progress/kendo-angular-charts': {
           main: './dist/npm/js/main.js',
           defaultExtension: 'js'
         },
      'npm:@progress/kendo-angular-resize-sensor': {
           main: './dist/npm/js/main.js',
           defaultExtension: 'js'
         },
      'npm:@progress/kendo-charts': {
           main: './dist/npm/js/main.js',
           defaultExtension: 'js'
         },
      '@progress/kendo-angular-popup': {
          defaultExtension: 'js',
          main: "./dist/npm/js/main.js"
      },
      '@progress/kendo-angular-intl': {
          defaultExtension: 'js',
          main: "./dist/npm/js/main.js"
      },
      '@progress/kendo-popup-common': {
          defaultExtension: 'js',
          main: "./dist/npm/js/main.js"
      },
      '@progress/kendo-drawing': {
          defaultExtension: 'js',
          main: "./dist/npm/js/main.js"
      },
      '@telerik/kendo-intl': {
          defaultExtension: 'js',
          main: "./dist/npm/js/main.js"
      },
      '@telerik/kendo-draggable': {
          defaultExtension: 'js',
          main: "./dist/npm/js/main.js"
      },
      app: {
        main: './main.js',
        defaultExtension: 'js'
      },
      rxjs: {
        defaultExtension: 'js'
      }
    }
  });
})(this);

​

现在，我得到以下错误：

获取//localhost:3002/chroma-js404(未找到)错误：(SystemJS) XHR错误(404未找到)加载//localhost:3002/chroma(…)获取//localhost:3002/chroma-js404(未找到)

不知道现在该怎么做。我会尽可能多地发布关于我的环境的文章。任何帮助都是非常感谢的。

节点:版本v.2.2 nmp:版本3.9.5 Kendo Charts：'0.4.0‘、'0.4.1’、'0.5.0‘、'0.5.1’、'0.5.2‘、'0.5.3’、'0.6.0‘、'0.7.0’、'0.7.1‘、'0.7.2’、'0.7.3'，“0.7.4”、“0.7.5”、“0.8.0”、“0.8.1”

App.moddule.ts

​

     import { BrowserModule } from '@angular/platform-browser';
     import { NgModule } from '@angular/core';      
     import { HttpModule } from '@angular/http';
     import { ButtonsModule } from '@progress/kendo-angular-buttons';
     import { ChartsModule } from '@progress/kendo-angular-charts';     

     import { AppComponent } from './app.component';

     @NgModule({
       declarations: [        
           AppComponent       
               ],        
         imports: [     
           BrowserModule,
           HttpModule,       
           ButtonsModule,
           ChartsModule        
           ],       
         providers: [],     
         bootstrap: [AppComponent]
     })
     export class AppModule { }

​

app.component.ts

​

     import { Component } from '@angular/core';

     @Component({
       selector: 'my-app',
       styleUrls: [
         // load the default theme
         '../node_modules/@telerik/kendo-theme-default/dist/all.css'
       ],       
       template: `
         My First Kendo UI Angular 2 App
         <button
           kendoButton
           (click)="onButtonClick()"
           [primary]="true">
           My Kendo UI Button
         </button>
       `
     })
     export class AppComponent {
       onButtonClick() {
         alert('Hello from Kendo UI!');
       }
     }

​

package.json

{
  "name": "angular-quickstart",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
    "lite": "lite-server",
    "tsc": "tsc",
    "tsc:w": "tsc -w"
  },
  "licenses": [
    {
      "type": "MIT",
      "url": "https://github.com/angular/angular.io/blob/master/LICENSE"
    }
  ],
  "dependencies": {
    "@angular/common": "~2.1.1",
    "@angular/compiler": "~2.1.1",
    "@angular/core": "~2.1.1",
    "@angular/forms": "~2.1.1",
    "@angular/http": "~2.1.1",
    "@angular/platform-browser": "~2.1.1",
    "@angular/platform-browser-dynamic": "~2.1.1",
    "@angular/router": "~3.1.1",
    "@angular/upgrade": "~2.1.1",
    "@progress/kendo-angular-buttons": "^0.13.2",
    "@progress/kendo-angular-charts": "^0.8.1",
    "@telerik/kendo-theme-default": "^1.29.0",
    "angular-in-memory-web-api": "~0.1.13",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.8",
    "rxjs": "5.0.0-beta.12",
    "systemjs": "0.19.39",
    "zone.js": "^0.6.25"
  },
  "devDependencies": {
    "@types/core-js": "^0.9.34",
    "@types/node": "^6.0.45",
    "concurrently": "^3.0.0",
    "lite-server": "^2.2.2",
    "typescript": "^2.0.3"
  }
}

​

index.html

<html>
  <head>
    <title>Angular QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://www.telerik.com/kendo-angular-ui/npm/node_modules//@telerik/kendo-theme-default/dist/all.css" />
    <link rel="stylesheet" href="styles.css">
    <!-- 1. Load libraries -->
     <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>

    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>
  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

​

Answer 1

嗨，我有一个类似的问题，在我的例子中，它与色度-js没有被加载有关。

将此添加到您的system.config.js中：

地图：

'chroma-js':'npm:chroma-js',

在包裹中：

'npm:chroma-js': {
          defaultExtension: 'js',
          main: "./chroma.js"
        },

加上这个，我的问题就解决了。