Kendo UI For Angular Support For Angular 5.0

[Askaliate]

Hello,

 

Do the components in the Kendo UI for Angular packages work with Angular 5.0? If not, what is the latest recommended version of Angular that should be used when developing these components?

 

Thanks!

[Dimiter Topalov]

Hi Ioana,

The latest versions of the Kendo UI for Angular components are compatible with Angular 5.x since it was officially released:

https://github.com/telerik/kendo-angular/issues/1061

Let us know if you face any issues when using our components in an Angular 5 project.

Regards,
Dimiter Topalov
Progress Telerik

[Askaliate]

Thank you Dimiter - this is really great news!

[Tito]

Hi, 

Would it be possible to provide some documentation around versions of Angular supported with the various Kendo UI for Angular releases? Some sort of compatibility matrix would be nice, the only way I even knew I may have issues is because npm notified me of unmet peer dependencies.

 

Thanks

[Dimiter Topalov]

Hello Tyler,

Thank you for the feedback and the meaningful suggestion. In general, we include information about switching to support for a new major Angular version in the Changelog section for each package, e.g.:

https://www.telerik.com/kendo-angular-ui/components/grid/changelog/

Other breaking changes regarding support for specific third-party libraries (like the ones we were recently forced to introduce due to breaking changes in RxJS 5.5.x), and the specific actions required, are typically documented in the installation section of each package, e.g.:

https://www.telerik.com/kendo-angular-ui/components/grid/#toc-installation

Common troubleshooting issues regarding some required updates in customer packages are listed in the TroubleShooting section:

https://www.telerik.com/kendo-angular-ui/components/troubleshooting/#toc-installation

Some information about our NPM packages is also available in the FAQ section:

https://www.telerik.com/kendo-angular-ui/components/faq/#toc-package-and-release-management

That said, we will discuss your request and consider introducing a dedicated documentation section for listing the compatibility requirements between different versions of our packages and the Angular framework.

Regards,
Dimiter Topalov
Progress Telerik

[deylyn]

Hola, que tal necsito ayuda, estoy usando kendo ui con angular 5 y al tratar de usar la exportacion a excel del componente grid, 

me sale esto :

'kendo-grid-excel' is not a known element:
1. If 'kendo-grid-excel' is an Angular component, then verify that it is part of this module.
2. If 'kendo-grid-excel' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
        </ng-template>
    </kendo-grid-column>
    [ERROR ->]<kendo-grid-excel fileName="Products.xlsx"></kendo-grid-excel>
</kendo-grid>

"): ng:///ReportModule/SuppliersReportComponent.html@143:4
    at syntaxError (compiler.js:485)
    at TemplateParser.parse (compiler.js:24661)
    at JitCompiler._parseTemplate (compiler.js:34614)
    at JitCompiler._compileTemplate (compiler.js:34589)
    at eval (compiler.js:34490)
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (compiler.js:34490)
    at eval (compiler.js:34360)
    at Object.then (compiler.js:474)
    at JitCompiler._compileModuleAndComponents (compiler.js:34359)

 

 

 

tengo todo lo que necesito importado, y todas las librerias de kendo actualizadas

[deylyn]

este es mi componente kendo en mi html: 

<kendo-grid [hidden]="!isMobile"
[data]="gridData"
[pageSize]="state.take"
[skip]="state.skip"
[sort]="state.sort"
[filter]="state.filter"
[group]="state.group"
[sortable]="{ mode: 'multiple' }"
[height]="530"
[pageable]="false"
[groupable]="{ showFooter: true }"
[resizable]="true"
[reorderable]="true"
[navigable]="true"
filterable="menu"
(dataStateChange)="dataStateChange($event)">
<kendo-grid-messages
pagerPage="Página"
pagerOf="de"
pagerItems="ítems"
pagerItemsPerPage="ítems por página"
>
</kendo-grid-messages>
<kendo-grid-column
field="id"
title="ID"
width="120"
[minResizableWidth]="30"
filter="numeric">
<ng-template kendoGridGroupHeaderTemplatе> </ng-template>
</kendo-grid-column>
<kendo-grid-column
field="readonly_FullNameAndCode"
title="Name"
width="200"
filter="text">
</kendo-grid-column>
<kendo-grid-column
field="tradeName"
title="Trade Name"
width="200"
filter="text">
</kendo-grid-column>
<kendo-grid-column
field="fiscalId"
title="Fiscal Id"
width="200"
filter="text">
</kendo-grid-column>
<kendo-grid-column
field="address"
title="Address"
width="200"
filter="text">
</kendo-grid-column>
<kendo-grid-column
field="postalCode"
title="Postal Code"
width="200"
filter="text">
</kendo-grid-column>
<kendo-grid-column
field="city"
title="City"
width="200"
filter="text">
</kendo-grid-column>
<kendo-grid-column
field="stateDescription"
title="State"
width="200"
filter="text">
</kendo-grid-column>
<kendo-grid-column
field="countryDescription"
title="Country"
width="200"
filter="text">
</kendo-grid-column>
<kendo-grid-column
field="telephone"
title="Teléfono"
width="150"
filter="text">
</kendo-grid-column>
<kendo-grid-column
field="fax"
title="Fax"
width="150"
filter="text">
</kendo-grid-column>
<kendo-grid-column
field="email"
title="Email"
width="150"
filter="text">
</kendo-grid-column>
<kendo-grid-column
field="webPage"
title="Web Page"
width="150"
filter="text">
<ng-template
kendoGridGroupFooterTemplate let-group="group">
</ng-template>
</kendo-grid-column>
<kendo-grid-excel fileName="Products.xlsx"></kendo-grid-excel>
</kendo-grid>

[deylyn]

todo esto es lo que tengo importado en el componente de typescript :

 

import {Component, OnInit} from '@angular/core';
import {EntitySupplierService} from "../../../../services/entities/supplier.service";
import {FilterTagsService} from "../../../../services/general/filter-tags.service";
import {Supplier} from "../../../../models/entities/supplier/supplier.model";
import {Api} from "../../../../../services/api.service";
import {FuseSplashScreenService} from "../../../../../core/services/splash-screen.service";
import {SettingsService} from "../../../../../services/setting.service";
import { process, GroupDescriptor, State, aggregateBy } from '@progress/kendo-data-query';
import { ExcelExportData,ExcelExportModule} from '@progress/kendo-angular-excel-export';
import {
GridComponent,
GridDataResult,
DataStateChangeEvent
} from '@progress/kendo-angular-grid';
declare var $: any;
@Component({
selector : 'suppliers-report',
templateUrl: './suppliers-report.component.html',
styleUrls: ['suppliers-report.component.scss']
})

[deylyn]

este es mi app.module.ts

 

 

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterModule, Routes } from '@angular/router';
import 'hammerjs';
import 'mousetrap';
import { SharedModule } from './core/modules/shared.module';
import { AppComponent } from './app.component';
import { FuseMainModule } from './main/main.module';
import { FuseSplashScreenService } from './core/services/splash-screen.service';
import { FuseConfigService } from './core/services/config.service';
import { FuseNavigationService } from './core/components/navigation/navigation.service';
import { appRoutes } from './app.routing';
import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import {ServicesModule} from "./services/services.module";
import {CommonModule} from "./common/common.module";
import {GrowlModule} from "primeng/growl";
import { ModalGalleryModule } from 'angular-modal-gallery';
//import { GridModule } from '@progress/kendo-angular-grid';
import { GridModule, ExcelModule } from '@progress/kendo-angular-grid';
import { ExcelExportData } from '@progress/kendo-angular-excel-export';
import { ExcelExportModule } from '@progress/kendo-angular-excel-export';
import {
GridComponent,
GridDataResult,
DataStateChangeEvent
} from '@progress/kendo-angular-grid';

import { ColorPickerModule } from 'ngx-color-picker';
export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http);
}
@NgModule({

declarations: [
AppComponent
],
imports : [
GridModule, ExcelModule , ExcelExportModule,
BrowserModule,
HttpClientModule,
BrowserAnimationsModule,
RouterModule.forRoot(appRoutes),
SharedModule,
FuseMainModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
}),
NgbModule.forRoot(),
ServicesModule,
CommonModule,
GrowlModule,
ModalGalleryModule.forRoot(),
ColorPickerModule

],
providers : [
FuseSplashScreenService,
FuseConfigService,
FuseNavigationService,
],
bootstrap : [
AppComponent
]
})
export class AppModule
{
}

[deylyn]

este es mi package.json

 

{
"name": "fuse2",
"version": "1.3.5",
"license": "https://themeforest.net/licenses/terms/regular",
"scripts": {
"ng": "ng",
"start": "ng serve --open",
"start-hmr": "ng serve --hmr -e=hmr -sm=false",
"start-hmr-sourcemaps": "ng serve --hmr -e=hmr",
"build": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --dev",
"build-stats": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --dev --stats-json",
"build-prod": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --prod",
"build-prod-stats": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --prod --stats-json",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"bundle-report": "webpack-bundle-analyzer dist/stats.json"
},
"private": true,
"dependencies": {
"@agm/core": "1.0.0-beta.2",
"@angular/animations": "5.2.1",
"@angular/cdk": "5.1.0",
"@angular/common": "5.2.1",
"@angular/compiler": "5.2.1",
"@angular/core": "5.2.1",
"@angular/flex-layout": "2.0.0-beta.12",
"@angular/forms": "5.2.1",
"@angular/http": "5.2.1",
"@angular/material": "5.1.0",
"@angular/material-moment-adapter": "5.1.0",
"@angular/platform-browser": "5.2.1",
"@angular/platform-browser-dynamic": "5.2.1",
"@angular/router": "5.2.1",
"@ng-bootstrap/ng-bootstrap": "1.0.0",
"@ngrx/effects": "5.0.0",
"@ngrx/router-store": "5.0.0",
"@ngrx/store": "5.0.0",
"@ngrx/store-devtools": "5.0.0",
"@ngx-translate/core": "9.1.1",
"@ngx-translate/http-loader": "2.0.1",
"@progress/kendo-angular-buttons": "3.0.4",
"@progress/kendo-angular-dateinputs": "2.1.1",
"@progress/kendo-angular-dropdowns": "2.0.2",
"@progress/kendo-angular-excel-export": "1.0.7",
"@progress/kendo-angular-grid": "2.1.2",
"@progress/kendo-angular-inputs": "2.2.0",
"@progress/kendo-angular-intl": "1.3.2",
"@progress/kendo-angular-l10n": "1.0.7",
"@progress/kendo-data-query": "1.2.0",
"@progress/kendo-drawing": "1.5.1",
"@progress/kendo-theme-default": "2.48.1",
"@swimlane/ngx-charts": "7.0.1",
"@swimlane/ngx-datatable": "11.1.7",
"@swimlane/ngx-dnd": "3.1.0",
"@types/prismjs": "1.9.0",
"angular-calendar": "0.23.2",
"angular-in-memory-web-api": "0.5.2",
"angular-modal-gallery": "5.1.0",
"aws-sdk": "2.190.0",
"chart.js": "2.7.1",
"class-validator": "0.8.4",
"classlist.js": "1.1.20150312",
"core-js": "2.5.3",
"d3": "4.12.2",
"es6-shim": "0.35.3",
"font-awesome": "4.7.0",
"hammerjs": "2.0.8",
"intl": "1.2.5",
"json2typescript": "1.0.5",
"lodash": "4.17.4",
"moment": "2.20.1",
"mousetrap": "1.6.1",
"ng2-charts": "1.6.0",
"ng2-toastr": "4.1.2",
"ngrx-store-freeze": "0.2.0",
"ngx-color-picker": "5.3.0",
"ngx-cookie-service": "1.0.10",
"perfect-scrollbar": "1.3.0",
"primeng": "5.2.0",
"prismjs": "1.10.0",
"rxjs": "5.5.6",
"web-animations-js": "2.3.1",
"zone.js": "0.8.20"
},
"devDependencies": {
"@angular/cli": "1.6.5",
"@angular/compiler-cli": "5.2.1",
"@angular/language-service": "5.2.1",
"@angularclass/hmr": "2.1.3",
"@types/hammerjs": "2.0.35",
"@types/jasmine": "2.8.5",
"@types/jasminewd2": "2.0.3",
"@types/mousetrap": "1.6.0",
"@types/node": "6.0.96",
"codelyzer": "4.1.0",
"jasmine-core": "2.8.0",
"jasmine-spec-reporter": "4.2.1",
"karma": "2.0.0",
"karma-chrome-launcher": "2.2.0",
"karma-cli": "1.0.1",
"karma-coverage-istanbul-reporter": "1.3.3",
"karma-jasmine": "1.1.1",
"karma-jasmine-html-reporter": "0.2.2",
"protractor": "5.1.2",
"ts-node": "4.1.0",
"tslint": "5.9.1",
"typescript": "2.5.3",
"webpack-bundle-analyzer": "2.9.2"
}
}

[Dimiter Topalov]

Hi Deylyn,

Please note that our support service and official communication channels are in English only. Based on the provided files and error messages, I assume the described issue is related to the Grid Excel module not imported in the same NgModule the component the Grid is in is declared.

In order Angular modules and their members to be available in the components, they should be either imported in the same module the respective component is declared in, or in a shared module that is in turn imported in the same module the component is declared in. If the latter approach is used, the respective modules need to also be reexported from the shared module.

For example, if the Grid and its Excel export functionality is used in a module "KendoModule", this KendoModule needs to import the Kendo-related modules (importing them in the root module will make them available to components that are declared in the root NgModule only - in this case in the AppComponent):

https://www.telerik.com/kendo-angular-ui/components/troubleshooting/#toc-when-i-try-to-load-a-kendo-ui-component-for-angular-a-runtime-error-occurs-that-the-component-is-not-recognized

I can also suggest upgrading to the latest versions of our components, e.g. Grid 3.x, Buttons 4.x, etc. The latest versions for each package are listed in the respective Change Log section, e.g.:

https://www.telerik.com/kendo-angular-ui/components/grid/changelog/

https://www.telerik.com/kendo-angular-ui/components/dropdowns/changelog/

I hope this helps, but if the issue persists, please send us an isolated runnable project where it can be observed, so we can inspect it further, and determine what might be causing it. Thank you in advance.

Regards,
Dimiter Topalov
Progress Telerik