Components: cdk bundles does not load properly with rxjs 6.0.0-beta.1

Created on 24 Mar 2018  路  7Comments  路  Source: angular/components

Bug, feature request, or proposal:

Bug : cdk bundles does not load properly with rxjs 6.0.0-beta.1

What is the expected behavior?

cdk bundle should load properly without errors

What is the current behavior?

Error at runtime
cdk-observers.umd.js:11 Uncaught TypeError: Cannot read property 'operators' of undefined
at MutationObserverFactory.create (VM8268 cdk-observers.umd.js:11)
at VM8268 cdk-observers.umd.js:12

What are the steps to reproduce?

Providing a StackBlitz reproduction is the best way to share your issue.

StackBlitz starter: https://goo.gl/wwnhMV

https://plnkr.co/edit/mYSvhRjigG5DXbjRGSJa?p=preview

What is the use-case or motivation for changing an existing behavior?

cdk bundle should load properly without errors

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular: 6.0.0-rc.0
Material: 6.0.0-beta.5
OS: Windows
Browsers: All

Is there anything else we should know?

has pr

Most helpful comment

Make sure you have @angular/cdk at 6.0.0-beta.5 as well. I only updated @angular/material and was having the same issue.

The remaining issues I'm having are this

ERROR in node_modules/@angular/material/table/typings/table-data-source.d.ts(130,5): error TS2416: Property 'connect' in type 'MatTableDataSource<T>' is not assignable to the same property in base type 'DataSource<T>'.
  Type '() => BehaviorSubject<T[]>' is not assignable to type '(collectionViewer: CollectionViewer) => Observable<T[]>'.
    Type 'BehaviorSubject<T[]>' is not assignable to type 'Observable<T[]>'.
      Property 'source' is protected but type 'Observable<T>' is not a class derived from 'Observable<T>'.
node_modules/@angular/material/tree/typings/data-source/flat-data-source.d.ts(80,5): error TS2416: Property 'connect' in type 'MatTreeFlatDataSource<T, F>' is not assignable to the same property in base type 'DataSource<F>'.
  Type '(collectionViewer: CollectionViewer) => Observable<F[]>' is not assignable to type '(collectionViewer: CollectionViewer) => Observable<F[]>'. Two different types with this name exist, but they are unrelated.
    Type 'Observable<F[]>' is not assignable to type 'Observable<F[]>'. Two different types with this name exist, but they are unrelated.
      Property 'source' is protected but type 'Observable<T>' is not a class derived from 'Observable<T>'.
node_modules/@angular/material/tree/typings/data-source/nested-data-source.d.ts(23,5): error TS2416: Property 'connect' in type 'MatTreeNestedDataSource<T>' is not assignable to the same property in base type 'DataSource<T>'.
  Type '(collectionViewer: CollectionViewer) => Observable<T[]>' is not assignable to type '(collectionViewer: CollectionViewer) => Observable<T[]>'. Two different types with this name exist, but they are unrelated.
    Type 'Observable<T[]>' is not assignable to type 'Observable<T[]>'. Two different types with this name exist, but they are unrelated.

Update: I got past this by using npm i rather than yarn. For some reason yarn wasn't using the right TypeScript version to compile @angular/material

All 7 comments

Are you seeing this error with other usages outside of plunkr?

Make sure you have @angular/cdk at 6.0.0-beta.5 as well. I only updated @angular/material and was having the same issue.

The remaining issues I'm having are this

ERROR in node_modules/@angular/material/table/typings/table-data-source.d.ts(130,5): error TS2416: Property 'connect' in type 'MatTableDataSource<T>' is not assignable to the same property in base type 'DataSource<T>'.
  Type '() => BehaviorSubject<T[]>' is not assignable to type '(collectionViewer: CollectionViewer) => Observable<T[]>'.
    Type 'BehaviorSubject<T[]>' is not assignable to type 'Observable<T[]>'.
      Property 'source' is protected but type 'Observable<T>' is not a class derived from 'Observable<T>'.
node_modules/@angular/material/tree/typings/data-source/flat-data-source.d.ts(80,5): error TS2416: Property 'connect' in type 'MatTreeFlatDataSource<T, F>' is not assignable to the same property in base type 'DataSource<F>'.
  Type '(collectionViewer: CollectionViewer) => Observable<F[]>' is not assignable to type '(collectionViewer: CollectionViewer) => Observable<F[]>'. Two different types with this name exist, but they are unrelated.
    Type 'Observable<F[]>' is not assignable to type 'Observable<F[]>'. Two different types with this name exist, but they are unrelated.
      Property 'source' is protected but type 'Observable<T>' is not a class derived from 'Observable<T>'.
node_modules/@angular/material/tree/typings/data-source/nested-data-source.d.ts(23,5): error TS2416: Property 'connect' in type 'MatTreeNestedDataSource<T>' is not assignable to the same property in base type 'DataSource<T>'.
  Type '(collectionViewer: CollectionViewer) => Observable<T[]>' is not assignable to type '(collectionViewer: CollectionViewer) => Observable<T[]>'. Two different types with this name exist, but they are unrelated.
    Type 'Observable<T[]>' is not assignable to type 'Observable<T[]>'. Two different types with this name exist, but they are unrelated.

Update: I got past this by using npm i rather than yarn. For some reason yarn wasn't using the right TypeScript version to compile @angular/material

I'm not developping in typescript... only in ecmascript with bundles.
I'm having this problem outside plunkr in my webapp.

Same problem with rxjs 6.0.0-beta.3

Uncaught TypeError: Cannot read property 'operators' of undefined
at MutationObserverFactory.create (cdk-observers.umd.js:11)
at cdk-observers.umd.js:12
cdk-a11y.umd.js:11 Uncaught TypeError: Cannot read property 'operators' of undefined
at Object.setPrototypeOf.__proto__ (cdk-a11y.umd.js:11)
at cdk-a11y.umd.js:12
cdk-layout.umd.js:11 Uncaught TypeError: Cannot read property 'operators' of undefined
at LayoutModule.decorators.type (cdk-layout.umd.js:11)
at cdk-layout.umd.js:12
cdk-scrolling.umd.js:11 Uncaught TypeError: Cannot read property 'operators' of undefined
at DEFAULT_SCROLL_TIME (cdk-scrolling.umd.js:11)
at cdk-scrolling.umd.js:12
cdk-overlay.umd.js:11 Uncaught TypeError: Cannot read property 'operators' of undefined
at Object.setPrototypeOf.__proto__ (cdk-overlay.umd.js:11)
at cdk-overlay.umd.js:12
cdk-text-field.umd.js:11 Uncaught TypeError: Cannot read property 'operators' of undefined
at cdk-text-field.umd.js:11
at cdk-text-field.umd.js:12
cdk-table.umd.js:11 Uncaught TypeError: Cannot read property 'operators' of undefined
at Object.setPrototypeOf.__proto__ (cdk-table.umd.js:11)
at cdk-table.umd.js:12
cdk-tree.umd.js:11 Uncaught TypeError: Cannot read property 'operators' of undefined
at Object.setPrototypeOf.__proto__ (cdk-tree.umd.js:11)
at cdk-tree.umd.js:12
material.umd.js:11 Uncaught TypeError: Cannot read property 'operators' of undefined
at Object.setPrototypeOf.__proto__ (material.umd.js:11)
at material.umd.js:12

@msc117 It worked, after using npm instead of yarn. Thnaks :)

Why are you closing the issue... I'm not having a compile issue but a runtime error using bundle. There is still the problem in my sample... https://plnkr.co/edit/mYSvhRjigG5DXbjRGSJa?p=preview

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_This action has been performed automatically by a bot._

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Hiblton picture Hiblton  路  3Comments

vanor89 picture vanor89  路  3Comments

3mp3ri0r picture 3mp3ri0r  路  3Comments

crutchcorn picture crutchcorn  路  3Comments

LoganDupont picture LoganDupont  路  3Comments