ERROR in @angular/material/autocomplete/typings/autocomplete-origin.d.ts: Type 'ElementRef' is not generic

I have downloaded some angular template which makes use of angular material library... I was trying the run this template on my local machine.. I have successfully executed the npm install.. but while ng serve.. I am getting the warnings & errors like below,

npm install

ng serve

Your global Angular CLI version (6.0.7) is greater than your local
version (1.7.4). The local Angular CLI version is used.

To disable this warning use "ng config -g cli.warnings.versionMismatch false".

@angular/compiler-cli@4.4.7 requires typescript@'>=2.1.0 <2.4.0' but 2.5.3 was found instead.
Using this version can result in undefined behaviour and difficult to debug problems.

Please run the following command to install a compatible version of TypeScript.

npm install typescript@'>=2.1.0 <2.4.0'

To disable this warning run "ng set warnings.typescriptMismatch=false".

** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
11% building modules 13/15 modules 2 active ...modules/style-loader/lib/addStyles.jswebpack: wait until bundle finished: /
Date: 2018-07-01T07:48:54.668Z
Hash: 7980dfc21e378497af3e
Time: 30697ms
chunk {inline} inline.bundle.js (inline) 3.85 kB [entry] [rendered]
chunk {main} main.bundle.js (main) 1.91 MB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js (polyfills) 595 kB [initial] [rendered]
chunk {styles} styles.bundle.js (styles) 211 kB [initial] [rendered]
chunk {vendor} vendor.bundle.js (vendor) 20.4 MB [initial] [rendered]

WARNING in ./node_modules/@angular/material/esm5/sidenav.es5.js
1007:83-104 "export 'ANIMATION_MODULE_TYPE' was not found in '@angular/platform-browser/animations'

WARNING in ./node_modules/@angular/material/esm5/datepicker.es5.js
101:59-75 "export 'defineInjectable' was not found in '@angular/core'

WARNING in ./node_modules/@angular/material/esm5/slider.es5.js
1073:83-104 "export 'ANIMATION_MODULE_TYPE' was not found in '@angular/platform-browser/animations'

WARNING in ./node_modules/@angular/cdk/esm5/a11y.es5.js
1132:164-170 "export 'inject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/a11y.es5.js
1132:62-78 "export 'defineInjectable' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/text-field.es5.js
122:149-155 "export 'inject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/text-field.es5.js
122:167-173 "export 'inject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/text-field.es5.js
122:57-73 "export 'defineInjectable' was not found in '@angular/core'

WARNING in ./node_modules/@angular/material/esm5/core.es5.js
1334:59-75 "export 'defineInjectable' was not found in '@angular/core'

WARNING in ./node_modules/@angular/material/esm5/progress-bar.es5.js
143:83-104 "export 'ANIMATION_MODULE_TYPE' was not found in '@angular/platform-browser/animations'

WARNING in ./node_modules/@angular/cdk/esm5/observers.es5.js
164:149-155 "export 'inject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/observers.es5.js
164:57-73 "export 'defineInjectable' was not found in '@angular/core'

WARNING in ./node_modules/@angular/material/esm5/button.es5.js
168:83-104 "export 'ANIMATION_MODULE_TYPE' was not found in '@angular/platform-browser/animations'

WARNING in ./node_modules/@angular/cdk/esm5/a11y.es5.js
1700:152-158 "export 'inject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/a11y.es5.js
1700:182-188 "export 'inject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/a11y.es5.js
1700:198-204 "export 'inject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/a11y.es5.js
1700:58-74 "export 'defineInjectable' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/a11y.es5.js
1903:143-149 "export 'inject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/a11y.es5.js
1903:184-190 "export 'inject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/a11y.es5.js
1903:55-71 "export 'defineInjectable' was not found in '@angular/core'

WARNING in ./node_modules/@angular/material/esm5/core.es5.js
2108:83-104 "export 'ANIMATION_MODULE_TYPE' was not found in '@angular/platform-browser/animations'

WARNING in ./node_modules/@angular/material/esm5/core.es5.js
2186:83-104 "export 'ANIMATION_MODULE_TYPE' was not found in '@angular/platform-browser/animations'

WARNING in ./node_modules/@angular/material/esm5/button.es5.js
222:83-104 "export 'ANIMATION_MODULE_TYPE' was not found in '@angular/platform-browser/animations'

WARNING in ./node_modules/@angular/cdk/esm5/a11y.es5.js
2427:140-146 "export 'inject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/a11y.es5.js
2427:156-162 "export 'inject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/a11y.es5.js
2427:54-70 "export 'defineInjectable' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/layout.es5.js
258:158-164 "export 'inject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/layout.es5.js
258:180-186 "export 'inject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/layout.es5.js
258:60-76 "export 'defineInjectable' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/scrolling.es5.js
266:152-158 "export 'inject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/scrolling.es5.js
266:168-174 "export 'inject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/scrolling.es5.js
266:58-74 "export 'defineInjectable' was not found in '@angular/core'

WARNING in ./node_modules/@angular/material/esm5/progress-spinner.es5.js
293:83-104 "export 'ANIMATION_MODULE_TYPE' was not found in '@angular/platform-browser/animations'

WARNING in ./node_modules/@angular/cdk/esm5/overlay.es5.js
3345:170-176 "export 'inject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/overlay.es5.js
3345:193-199 "export 'inject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/overlay.es5.js
3345:211-217 "export 'inject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/overlay.es5.js
3345:64-80 "export 'defineInjectable' was not found in '@angular/core'

WARNING in ./node_modules/@angular/material/esm5/progress-spinner.es5.js
341:83-104 "export 'ANIMATION_MODULE_TYPE' was not found in '@angular/platform-browser/animations'

WARNING in ./node_modules/@angular/cdk/esm5/a11y.es5.js
362:143-149 "export 'inject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/a11y.es5.js
362:55-71 "export 'defineInjectable' was not found in '@angular/core'

WARNING in ./node_modules/@angular/material/esm5/sort.es5.js
384:59-75 "export 'defineInjectable' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/observers.es5.js
38:65-81 "export 'defineInjectable' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/bidi.es5.js
39:11-17 "export 'inject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/collections.es5.js
462:67-83 "export 'defineInjectable' was not found in '@angular/core'

WARNING in ./node_modules/@angular/material/esm5/slide-toggle.es5.js
499:83-104 "export 'ANIMATION_MODULE_TYPE' was not found in '@angular/platform-browser/animations'

WARNING in ./node_modules/@angular/cdk/esm5/scrolling.es5.js
517:143-149 "export 'inject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/scrolling.es5.js
517:161-167 "export 'inject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/scrolling.es5.js
517:55-71 "export 'defineInjectable' was not found in '@angular/core'

WARNING in ./node_modules/@angular/material/esm5/core.es5.js
525:11-17 "export 'inject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/material/esm5/checkbox.es5.js
570:83-104 "export 'ANIMATION_MODULE_TYPE' was not found in '@angular/platform-browser/animations'

WARNING in ./node_modules/@angular/cdk/esm5/overlay.es5.js
604:167-173 "export 'inject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/overlay.es5.js
604:193-199 "export 'inject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/overlay.es5.js
604:216-222 "export 'inject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/overlay.es5.js
604:232-238 "export 'inject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/overlay.es5.js
604:63-79 "export 'defineInjectable' was not found in '@angular/core'

WARNING in ./node_modules/@angular/material/esm5/stepper.es5.js
65:56-72 "export 'defineInjectable' was not found in '@angular/core'

WARNING in ./node_modules/@angular/material/esm5/bottom-sheet.es5.js
677:146-152 "export 'inject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/material/esm5/bottom-sheet.es5.js
677:163-169 "export 'inject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/material/esm5/bottom-sheet.es5.js
677:170-178 "export 'INJECTOR' was not found in '@angular/core'

WARNING in ./node_modules/@angular/material/esm5/bottom-sheet.es5.js
677:181-187 "export 'inject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/material/esm5/bottom-sheet.es5.js
677:56-72 "export 'defineInjectable' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/overlay.es5.js
719:179-185 "export 'inject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/overlay.es5.js
719:67-83 "export 'defineInjectable' was not found in '@angular/core'

WARNING in ./node_modules/@angular/material/esm5/paginator.es5.js
72:58-74 "export 'defineInjectable' was not found in '@angular/core'

WARNING in ./node_modules/@angular/material/esm5/form-field.es5.js
788:83-104 "export 'ANIMATION_MODULE_TYPE' was not found in '@angular/platform-browser/animations'

WARNING in ./node_modules/@angular/cdk/esm5/platform.es5.js
79:128-134 "export 'inject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/platform.es5.js
79:50-66 "export 'defineInjectable' was not found in '@angular/core'

WARNING in ./node_modules/@angular/material/esm5/icon.es5.js
816:149-155 "export 'inject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/material/esm5/icon.es5.js
816:172-178 "export 'inject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/material/esm5/icon.es5.js
816:194-200 "export 'inject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/material/esm5/icon.es5.js
816:57-73 "export 'defineInjectable' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/overlay.es5.js
821:152-158 "export 'inject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/overlay.es5.js
821:58-74 "export 'defineInjectable' was not found in '@angular/core'

WARNING in ./node_modules/@angular/material/esm5/radio.es5.js
821:83-104 "export 'ANIMATION_MODULE_TYPE' was not found in '@angular/platform-browser/animations'

WARNING in ./node_modules/@angular/cdk/esm5/layout.es5.js
86:140-146 "export 'inject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/bidi.es5.js
86:146-152 "export 'inject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/layout.es5.js
86:54-70 "export 'defineInjectable' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/bidi.es5.js
86:56-72 "export 'defineInjectable' was not found in '@angular/core'

WARNING in ./node_modules/@angular/material/esm5/snack-bar.es5.js
911:137-143 "export 'inject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/material/esm5/snack-bar.es5.js
911:154-160 "export 'inject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/material/esm5/snack-bar.es5.js
911:177-183 "export 'inject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/material/esm5/snack-bar.es5.js
911:184-192 "export 'INJECTOR' was not found in '@angular/core'

WARNING in ./node_modules/@angular/material/esm5/snack-bar.es5.js
911:195-201 "export 'inject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/material/esm5/snack-bar.es5.js
911:223-229 "export 'inject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/material/esm5/snack-bar.es5.js
911:248-254 "export 'inject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/material/esm5/snack-bar.es5.js
911:53-69 "export 'defineInjectable' was not found in '@angular/core'

ERROR in /home/rahul/Downloads/FriendColony_Web/node_modules/@angular/material/autocomplete/typings/autocomplete-origin.d.ts (15,17): Type 'ElementRef' is not generic.
ERROR in /home/rahul/Downloads/FriendColony_Web/node_modules/@angular/material/autocomplete/typings/autocomplete-origin.d.ts (18,21): Type 'ElementRef' is not generic.
ERROR in /home/rahul/Downloads/FriendColony_Web/node_modules/@angular/material/button-toggle/typings/button-toggle.d.ts (136,21): Type 'ElementRef' is not generic.
ERROR in /home/rahul/Downloads/FriendColony_Web/node_modules/@angular/material/button-toggle/typings/button-toggle.d.ts (154,104): Type 'ElementRef' is not generic.
ERROR in /home/rahul/Downloads/FriendColony_Web/node_modules/@angular/material/slide-toggle/typings/slide-toggle.d.ts (56,15): Type 'ElementRef' is not generic.
ERROR in
/home/rahul/Downloads/FriendColony_Web/node_modules/@angular/material/slide-toggle/typings/slide-toggle.d.ts (58,18): Type 'ElementRef' is not generic.
ERROR in Error: Metadata version mismatch for module /home/rahul/Downloads/FriendColony_Web/node_modules/@angular/material/expansion/typings/index.d.ts, found version 4, expected 3, resolving symbol AppModule in /home/rahul/Downloads/FriendColony_Web/src/app/app.module.ts, resolving symbol AppModule in /home/rahul/Downloads/FriendColony_Web/src/app/app.module.ts
at syntaxError (/home/rahul/Downloads/FriendColony_Web/node_modules/@angular/compiler/bundles/compiler.umd.js:1729:34)
at simplifyInContext
(/home/rahul/Downloads/FriendColony_Web/node_modules/@angular/compiler/bundles/compiler.umd.js:24979:23)
at StaticReflector.simplify (/home/rahul/Downloads/FriendColony_Web/node_modules/@angular/compiler/bundles/compiler.umd.js:24991:13)
at StaticReflector.annotations (/home/rahul/Downloads/FriendColony_Web/node_modules/@angular/compiler/bundles/compiler.umd.js:24418:41)
at _getNgModuleMetadata (/home/rahul/Downloads/FriendColony_Web/node_modules/@angular/compiler-cli/src/ngtools_impl.js:138:31)
at _extractLazyRoutesFromStaticModule (/home/rahul/Downloads/FriendColony_Web/node_modules/@angular/compiler-cli/src/ngtools_impl.js:109:26)
at Object.listLazyRoutesOfModule (/home/rahul/Downloads/FriendColony_Web/node_modules/@angular/compiler-cli/src/ngtools_impl.js:53:22)
at Function.NgTools_InternalApi_NG_2.listLazyRoutes (/home/rahul/Downloads/FriendColony_Web/node_modules/@angular/compiler-cli/src/ngtools_api.js:91:39)
at AotPlugin._getLazyRoutesFromNgtools (/home/rahul/Downloads/FriendColony_Web/node_modules/@ngtools/webpack/src/plugin.js:240:66)
at _donePromise.Promise.resolve.then.then.then.then.then (/home/rahul/Downloads/FriendColony_Web/node_modules/@ngtools/webpack/src/plugin.js:493:24)
at <anonymous>
at process._tickCallback (internal/process/next_tick.js:188:7)

webpack: Failed to compile.


package.json

{
"name": "demo",
"version": "2.4.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@agm/core": "^1.0.0-beta.1",
"@angular/animations": "^4.4.6",
"@angular/cdk": "github:angular/cdk-builds",
"@angular/common": "^4.4.6",
"@angular/compiler": "^4.4.6",
"@angular/core": "^4.4.6",
"@angular/forms": "^4.4.6",
"@angular/http": "^4.4.6",
"@angular/material": "github:angular/material2-builds",
"@angular/platform-browser": "^4.4.6",
"@angular/platform-browser-dynamic": "^4.4.6",
"@angular/router": "^4.4.6",
"angular2-image-upload": "^1.0.0-rc.0",
"core-js": "^2.5.1",
"firebase": "^4.6.0",
"hammerjs": "^2.0.8",
"ng2-file-upload": "^1.2.1",
"ng2-ui-auth": "^7.0.2",
"ng2-uploader": "^2.0.0",
"rxjs": "^5.5.1",
"secure-ls": "^1.1.0",
"zone.js": "^0.8.18"
},
"devDependencies": {
"@angular/cli": "^1.4.9",
"@angular/compiler-cli": "^4.4.6",
"@angular/language-service": "^4.4.6",
"@types/jasmine": "~2.6.1",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.0.47",
"codelyzer": "~3.2.2",
"jasmine-core": "~2.8.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "^2.0.4",
"karma-chrome-launcher": "~2.2.0",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.3.0",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "^5.3.2",
"ts-node": "~3.3.0",
"tslint": "~5.8.0",
"typescript": "~2.5.3"
},
"description": "This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.4.1.",
"main": "karma.conf.js",
"author": ""
}


My System Configuration

Angular CLI: 6.0.7
Node: 8.11.2
OS: linux x64
Angular:
...

Package Version
------------------------------------------------------
@angular-devkit/architect 0.6.7
@angular-devkit/core 0.6.7
@angular-devkit/schematics 0.6.7
@schematics/angular 0.6.7
@schematics/update 0.6.7
rxjs 6.2.0
typescript 2.7.2


1 Answer
1

in your package.json try :

"@angular/core": "^4.4.6",


replace:

"@angular/cdk": "^4.4.6",
"@angular/material": "^4.4.6",


npm i again.

npm i

"@angular/cdk": "^2.0.0-beta.12", "@angular/material": "^2.0.0-beta.12",

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.