Components: Typings errors and can't import modules

[RickePicke]

Bug, feature request, or proposal:

Get the given error below when i run ng serve in my angular project.

What is the expected behavior?

To start up and serve my app.

What is the current behavior?

I get this error:

ERROR in /Users/rickardborjesson/Desktop/GreatSigns/angular-src/node_modules/@angular/material/dialog/typings/dialog-config.d.ts (22,40): ',' expected.
ERROR in /Users/rickardborjesson/Desktop/GreatSigns/angular-src/node_modules/@angular/material/dialog/typings/dialog-config.d.ts (22,42): Type parameter name cannot be 'any'
ERROR in /Users/rickardborjesson/Desktop/GreatSigns/angular-src/node_modules/@angular/material/dialog/typings/dialog-container.d.ts (36,14): Generic type 'MatDialogConfig<D, any>' requires 2 type argument(s).
ERROR in /Users/rickardborjesson/Desktop/GreatSigns/angular-src/node_modules/@angular/material/dialog/typings/dialog.d.ts (50,15): ',' expected.
ERROR in /Users/rickardborjesson/Desktop/GreatSigns/angular-src/node_modules/@angular/material/dialog/typings/dialog.d.ts (50,17): Type parameter name cannot be 'any'
ERROR in /Users/rickardborjesson/Desktop/GreatSigns/angular-src/node_modules/@angular/material/dialog/typings/dialog.d.ts (50,90): Generic type 'MatDialogConfig<D, any>' requires 2 type argument(s).
ERROR in RangeError: Maximum call stack size exceeded
    at isRelatedTo (/Users/rickardborjesson/Desktop/GreatSigns/angular-src/node_modules/typescript/lib/typescript.js:31539:33)
    at isRelatedTo (/Users/rickardborjesson/Desktop/GreatSigns/angular-src/node_modules/typescript/lib/typescript.js:31645:38)
    at isRelatedTo (/Users/rickardborjesson/Desktop/GreatSigns/angular-src/node_modules/typescript/lib/typescript.js:31619:42)
    at isRelatedTo (/Users/rickardborjesson/Desktop/GreatSigns/angular-src/node_modules/typescript/lib/typescript.js:31680:42)
    at isRelatedTo (/Users/rickardborjesson/Desktop/GreatSigns/angular-src/node_modules/typescript/lib/typescript.js:31645:38)
    at isRelatedTo (/Users/rickardborjesson/Desktop/GreatSigns/angular-src/node_modules/typescript/lib/typescript.js:31619:42)
    at isRelatedTo (/Users/rickardborjesson/Desktop/GreatSigns/angular-src/node_modules/typescript/lib/typescript.js:31680:42)
    at isRelatedTo (/Users/rickardborjesson/Desktop/GreatSigns/angular-src/node_modules/typescript/lib/typescript.js:31645:38)
    at isRelatedTo (/Users/rickardborjesson/Desktop/GreatSigns/angular-src/node_modules/typescript/lib/typescript.js:31619:42)
    at isRelatedTo (/Users/rickardborjesson/Desktop/GreatSigns/angular-src/node_modules/typescript/lib/typescript.js:31680:42)
    at isRelatedTo (/Users/rickardborjesson/Desktop/GreatSigns/angular-src/node_modules/typescript/lib/typescript.js:31645:38)
    at isRelatedTo (/Users/rickardborjesson/Desktop/GreatSigns/angular-src/node_modules/typescript/lib/typescript.js:31619:42)
    at isRelatedTo (/Users/rickardborjesson/Desktop/GreatSigns/angular-src/node_modules/typescript/lib/typescript.js:31680:42)
    at isRelatedTo (/Users/rickardborjesson/Desktop/GreatSigns/angular-src/node_modules/typescript/lib/typescript.js:31645:38)
    at isRelatedTo (/Users/rickardborjesson/Desktop/GreatSigns/angular-src/node_modules/typescript/lib/typescript.js:31619:42)
    at isRelatedTo (/Users/rickardborjesson/Desktop/GreatSigns/angular-src/node_modules/typescript/lib/typescript.js:31680:42)

What are the steps to reproduce?

I could link my repo but not if it's unnecessary.

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

I just want to know if this error know or not

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

@angular/cli: 1.4.9
node: 6.11.2
os: darwin x64
@angular/animations: 4.4.6
@angular/cdk: 2.0.0-beta.12-65d3630
@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: 2.0.0-beta.12-65d3630
@angular/platform-browser: 4.4.6
@angular/platform-browser-dynamic: 4.4.6
@angular/router: 4.4.6
@angular/cli: 1.4.9
@angular/compiler-cli: 4.4.6
typescript: 2.2.2

Is there anything else we should know?

Im not using the the material Dialog. I just noticed that I get this error message: node_modules/@angular/material/material"' has no exported member 'MdProgressSpinnerModule'. when i try to import modules in my app.module.ts file:

app.module.ts

...
import { MdButtonModule, 
        MdSlideToggleModule, 
        MdRadioModule, 
        MdProgressSpinnerModule, 
        MdCheckboxModule } from '@angular/material';
...

[RickePicke]

Just realized you've changed from "Md.." to "Mat.." . This only fixes the importing issue tho!

[ApoorvBarwa]

i was getting the same error but the below piece of code solved my problem.... Havent properly tested it out though

change in
dialog-config.d.ts

export declare class MatDialogConfig<D = any> to 
export declare class MatDialogConfig<D>

and in
dialog-container.d.ts

_config: MatDialogConfig; to
_config: MatDialogConfig<any>;

You will not get a webpack error but i still have to test out how the Components are going to behave

Can someone from the dev team confirm if this is correct??

[crisbeto]

You can sort out the issue by updating to TypeScript 2.4 or above.

[kpayson]

The syntax errors are still an issue for me even with the latest version of typescript.
following the advice of ApoorvBarwa I change D=any to D in dialog.d.ts and dialog-config.d.ts also changed MatDialogConfig to MatDialogConfig<any> in dialog-container.ts

[ccoffee]

Landed here with same issue. While I can make the changes mentioned by kpayson and ApoorvBarwa to prevent errors, by following https://github.com/angular/material2/issues/8229 and manually adjusting package versions the issue is fixed without having to adjust code.

I tell VP of company that this package is a great fit and can get up and running quickly, so I show him by installing it but encounter problem after problem. He now has lost confidence in it, and its become something to poke fun at. The point is that it is much easier to fix code and documentation than bad impressions.

[RickePicke]

Updsting to the latest typescript version solved it for me! Got Angular CLI warnings due to it tho...

[ghost]

Update all @angular dependencies to 5.1.2 and typescript to 2.4.0

"dependencies": {
    "@angular/animations": "^5.1.2",
    "@angular/cdk": "^5.0.3",
    "@angular/common": "^5.1.2",
    "@angular/compiler": "^5.1.2",
    "@angular/core": "^5.1.2",
    "@angular/forms": "^5.1.2",
    "@angular/http": "^5.1.2",
    "@angular/material": "^5.0.3",
    "@angular/platform-browser": "^5.1.2",
    "@angular/platform-browser-dynamic": "^5.1.2",
    "@angular/router": "^5.1.2",
    "axios": "^0.17.1",
    "body-parser": "^1.18.2",
    "core-js": "^2.5.3",
    "express": "^4.16.2",
    "node-sass": "^4.7.2",
    "nodemon": "^1.14.7",
    "q": "^1.5.1",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@angular/cli": "^1.6.3",
    "@angular/compiler-cli": "^5.1.2",
    "@types/jasmine": "2.5.38",
    "@types/node": "~6.0.60",
    "codelyzer": "~2.0.0",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.0.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.0",
    "ts-node": "~2.0.0",
    "tslint": "~4.5.0",
    "typescript": "~2.4.0"
  }

This fixed my issues for me, remember and run rm-rf /node_modules && npm i to delete your node_modules and then install with latest

[FabianAlvaradoDotCom]

@bettercalldough it worked for me, thank you very much!

[angular-automatic-lock-bot[bot]]

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._}