Kendo-angular: Basic kendo grid not working in ASP.Net core angular 5

[craghavendra21]

I'm submitting a...

• Bug report

Current behavior

Basic Kendo grid is not working with angular 5

Expected behavior

basic kendo grid should work with asp.net core angular 5

Minimal reproduction of the problem with instructions

Create a ASP.NET Core Angular application using visual studio 2017.
upgrade the application to angular 5 by following below article.
http://www.talkingdotnet.com/upgrade-angular-4-app-angular-5-visual-studio-2017
Install kendo grid packages and add modules, references as per below article.
https://www.telerik.com/kendo-angular-ui/components/grid/
add simple kendo grid present in same article with same data.
error is in this file /node_modules/@progress/kendo-angular-grid/dist/es/editing/edit.service.js
In below function this.changed is giving error.

    function EditService(ngZone) {
        this.ngZone = ngZone;
        this.changes = new EventEmitter();
        this.editedIndices = [];
        this.keepEditCell = false;
        this.closingCell = false;
        this.changedSource = new Subject();
        this.changed = this.changedSource.asObservable().pipe(debounceTime(0));
    }

core.js:1448 ERROR Error: Uncaught (in promise): TypeError: this.changedSource.asObservable(...).pipe is not a function
TypeError: this.changedSource.asObservable(...).pipe is not a function
    at new t (edit.service.js:29)
    at to (core.js:12439)
    at Ji (core.js:12416)
    at $i (core.js:12257)
    at Do (core.js:13729)
    at Uo (core.js:14176)
    at Vo (core.js:14085)
    at Do (core.js:13770)
    at Oo (core.js:13631)
    at Os (core.js:15056)
    at new t (edit.service.js:29)
    at to (core.js:12439)
    at Ji (core.js:12416)
    at $i (core.js:12257)
    at Do (core.js:13729)
    at Uo (core.js:14176)
    at Vo (core.js:14085)
    at Do (core.js:13770)
    at Oo (core.js:13631)
    at Os (core.js:15056)
    at resolvePromise (vendor.js?v=RCvRrqPvM2Kc5BlkEQ045FeXR6gPMRIwfn51ludN14I:86577)
    at resolvePromise (vendor.js?v=RCvRrqPvM2Kc5BlkEQ045FeXR6gPMRIwfn51ludN14I:86548)
    at vendor.js?v=RCvRrqPvM2Kc5BlkEQ045FeXR6gPMRIwfn51ludN14I:86625
    at ZoneDelegate.invokeTask (vendor.js?v=RCvRrqPvM2Kc5BlkEQ045FeXR6gPMRIwfn51ludN14I:86231)
    at Object.onInvokeTask (core.js:4740)
    at ZoneDelegate.invokeTask (vendor.js?v=RCvRrqPvM2Kc5BlkEQ045FeXR6gPMRIwfn51ludN14I:86230)
    at Zone.runTask (vendor.js?v=RCvRrqPvM2Kc5BlkEQ045FeXR6gPMRIwfn51ludN14I:85998)
    at drainMicroTaskQueue (vendor.js?v=RCvRrqPvM2Kc5BlkEQ045FeXR6gPMRIwfn51ludN14I:86391)



md5-2d47034225c7528ec3e63b452100a085



+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @ngtools/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @types/[email protected]
+-- @types/[email protected]
+-- @types/[email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- UNMET PEER DEPENDENCY [email protected]
+-- [email protected]
+-- UNMET PEER DEPENDENCY [email protected]
+-- [email protected]
+-- [email protected]
`-- [email protected]

npm ERR! peer dep missing: typescript@^2.7, required by [email protected]
npm ERR! peer dep missing: webpack@^1.13.2 || ^2.1.0-beta, required by [email protected]
npm ERR! peer dep missing: webpack@^3.1.0, required by [email protected]
npm ERR! peer dep missing: webpack@^1.0.0 || ^2.0.0 || ^3.0.0, required by [email protected]

Browser:

• Chrome (desktop) version XX
• Firefox version XX
• Safari (desktop) version XX
• IE version XX
• Edge version XX

System:

• Node version: v8.11.1
• npm version: 5.8.0
• Platform: Windows

[TiborCsizmadia]

I have the same problem!

[craghavendra21]

Hi All Anyone seeing this issue?

[madani2010]

This solved my issue:
webpack --config webpack.config.vendor.js

[tsvetomir]

The error suggests that an incompatible version of rxjs - please remove package-lock.json, reinstall the node modules and ensure that npm ls rxjs lists rxjs > 5.5

Please note that the built-in template in Visual Studio is deprecated and will soon be replaced by a new version, based on the Angular CLI. See the updated Using with .NET Core help topic.

Our experience with the new template is very positive and we recommend migrating to it.

[yanbu0]

I had a similar issue after upgrading rxjs. Turned out to be how I was importing Observable.

This:
import { Observable } from 'rxjs/observable';
and this:
import { Observable } from 'rxjs/Observable';

ARE NOT THE SAME THING. (Note the capital 'O') At least in the version I have.

[tsvetomir]

Assuming this issue can be resolved as suggested by @yanbu0