angular 2 kendo-angular-intl 404 error when trying to use grid component

0
votes

I'm following the Getting Started sample on Telerik's Grid Overview page (http://www.telerik.com/kendo-angular-ui/components/grid/), and have followed the instructions but keep getting this error:

GET http://localhost:3000/@progress/kendo-angular-intl 404 (Not Found)

I have gotten a button to work, no problem, the click event works, and the skinning works as in their example, but I have followed the grid example to the letter and the grid gives this error.

I have tried pulling in @progress/kendo-angular-intl and added that to my system.config.js in the same way I added the buttons, but no luck. I also tried pulling in the charts and got the same issue as above.

I am using Angular 2.0.0 release, here is my package.json:

{
  "name": "myApp",
   "version": "1.0.0",
   "description": "myApp",
   "scripts": {
     "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
     "docker-build": "docker build -t ng2-quickstart .",
     "docker": "npm run docker-build && docker run -it --rm -p 3000:3000 -p      3001:3001 ng2-quickstart",
     "e2e": "tsc && concurrently \"http-server\" \"protractor      protractor.config.js\"",
     "lint": "tslint ./app/**/*.ts -t verbose",
     "lite": "lite-server",
     "postinstall": "typings install",
     "test": "tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\"",
     "tsc": "tsc",
     "tsc:w": "tsc -w",
     "typings": "typings",
     "webdriver:update": "webdriver-manager update"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "dependencies": {
     "@angular/common": "2.0.0",
     "@angular/compiler": "2.0.0",
     "@angular/core": "2.0.0",
     "@angular/forms": "2.0.0",
     "@angular/http": "2.0.0",
     "@angular/platform-browser": "2.0.0",
     "@angular/platform-browser-dynamic": "2.0.0",
     "@angular/router": "3.0.0",
     "@angular/upgrade": "2.0.0",
     "@progress/kendo-angular-buttons": "^0.9.3",
     "@progress/kendo-angular-charts": "^0.5.1",
     "@progress/kendo-angular-grid": "^0.3.2",
     "@progress/kendo-angular-intl": "^0.4.1",
     "angular2-localstorage": "^0.4.0",
     "bootstrap": "^3.3.6",
     "chart.js": "^2.1.3",
     "es6-shim": "^0.35.0",
     "font-awesome": "^4.6.3",
     "primeng": "^1.0.0-beta.16",
     "primeui": "^4.1.15",
     "reflect-metadata": "^0.1.3",
     "roboto-font": "^0.1.0",
     "rxjs": "5.0.0-beta.12",
     "systemjs": "0.19.37",
     "zone.js": "^0.6.17"
   },
   "devDependencies": {
     "concurrently": "^2.2.0",
     "lite-server": "^2.2.0",
     "typescript": "^1.8.10",
     "typings": "^1.0.4"
   },
   "repository": {}
 }
3
angularkendo-gridkendo-ui-angular2

3 Answers

2
votes

Here are my settings, the grid is working for me now.

I ran into the same issue at first.

I ran this script for the intl package. npm install --save cldr-data

It all is working fine with these settings.

ScreenShot: System Config

ScreenShot: node_modules folder for @progress and @telerik

hope this helps.

2
votes

I ran into same error when I was playing with grid. You have to add some configurations in ##systemjs.config.js##, 

 map: {
  // our app is within the app folder
  app: 'app',

  '@progress/kendo-angular-grid': 'npm:@progress/kendo-angular-grid',
  '@progress/kendo-angular-intl': 'npm:@progress/kendo-angular-intl',
  '@telerik/kendo-intl': 'npm:@telerik/kendo-intl',
},
 // packages tells the System loader how to load when no filename and/or no extension
packages: {
  app: {
    main: './main.js',
    defaultExtension: 'js'
  },
  'npm:@progress/kendo-angular-grid': {
    main: './dist/npm/js/main.js',
    defaultExtension: 'js'
  },
  'npm:@progress/kendo-angular-intl': {
    main: './dist/npm/js/main.js',
    defaultExtension: 'js'
  },
  'npm:@telerik/kendo-intl': {
    main: './dist/npm/js/main.js',
    defaultExtension: 'js'
  }
}

Hope can help you solve your problems.

0
votes

I have done this:

Installed @telerik/kendo-intl in my root of project. In my system.config.js file, I added:

map: {
...........\\\\
'@telerik/kendo-intl': 'npm:@telerik/kendo-intl',
...........\\\\
},
packages: {
...........\\\\
'npm:@telerik/kendo-intl': {
 main: './dist/npm/js/main.js',
 defaultExtension: 'js'
 },
............\\\\
}

Now Kendo Grid is visible but without Kendo styling in my web page.

Edit: I ran my code again after adding styles, Kendo Button now looks like Kendo Button but Kendo Grid still doesnot look like Kendo Grid.