Components: Erros in compilation - looks like it's internal to material

[ORESoftware]

Bug, feature request, or proposal:

I just installed 5.2.0, you have probably already seen this, but just in case

I get this compilation errors:

ERROR in node_modules/@angular/material/expansion/typings/expansion-panel.d.ts(36,14): error TS2314: Generic type 'TemplatePortal<C>' requires 1 type argument(s).
node_modules/@angular/material/tabs/typings/tab-body.d.ts(62,15): error TS2314: Generic type 'TemplatePortal<C>' requires 1 type argument(s).
node_modules/@angular/material/tabs/typings/tab.d.ts(28,23): error TS2314: Generic type 'TemplatePortal<C>' requires 1 type argument(s).

Here's the red:

[ORESoftware]

Here is my package.json, if it's relevant:

{
  "name": "suman-chrome-extension",
  "version": "0.0.1001",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.0.0",
    "@angular/cdk": "^5.0.2",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/flex-layout": "^2.0.0-beta.12",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/material": "^5.2.0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.0.0",
    "core-js": "^2.4.1",
    "file-saver": "^1.3.3",
    "hammerjs": "^2.0.8",
    "handlebars": "^4.0.11",
    "js-beautify": "^1.7.5",
    "prismjs": "^1.9.0",
    "rxjs": "^5.5.2",
    "uuid": "^3.2.1",
    "ws": "^3.3.3",
    "xpath-dom": "^0.2.2",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "^1.6.7",
    "@angular/compiler-cli": "^5.0.0",
    "@angular/language-service": "^5.0.0",
    "@types/chrome": "0.0.57",
    "@types/hammerjs": "^2.0.35",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "chrome-launcher": "^0.10.0",
    "codelyzer": "^4.0.1",
    "gulp": "^3.9.1",
    "gulp-debug": "^3.2.0",
    "gulp-sass": "^3.1.0",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "puppeteer": "^1.0.0",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "~2.4.2"
  }
}

[ORESoftware]

I went into node_modules and just manually saved:

TemplatePortal

and changed it to:

TemplatePortal<any>

but that's just a bandaid for now

[crisbeto]

I've got a branch that updates Material to Angular 5.2 and I didn't get this error. Can you try updating your version of typescript to 2.5?

[ORESoftware]

I am on tsc Version 2.6.1 globally and tsc version 2.4.2 locally
I think it's an actual issue

[julianobrasil]

This setup works for me without errors:

Angular CLI: 1.6.7
Node: 8.9.1
OS: win32 x64
Angular: 5.2.3
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, platform-server, router

@angular/cdk: 5.2.0
@angular/cli: 1.6.7
@angular/flex-layout: 2.0.0-beta.12
@angular/material: 5.2.0
@angular-devkit/build-optimizer: 0.0.42
@angular-devkit/core: 0.0.29
@angular-devkit/schematics: 0.0.52
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.7
@schematics/angular: 0.1.17
typescript: 2.7.1
webpack: 3.10.0

[ORESoftware]

Here's what I have:

Angular CLI: 1.6.7
Node: 9.2.0
OS: darwin x64
Angular: 5.1.2
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cdk: 5.0.2
@angular/cli: 1.6.7
@angular/flex-layout: 2.0.0-beta.12
@angular/material: 5.2.0
@angular-devkit/build-optimizer: 0.0.42
@angular-devkit/core: 0.0.29
@angular-devkit/schematics: 0.0.52
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.7
@schematics/angular: 0.1.17
typescript: 2.4.2
webpack: 3.10.0

[ORESoftware]

Here is the error (the 3 errors are of the same variety)

[ORESoftware]

So I fixed it by using TemplatePortal<any>

It _seems_ like an actual problem with the published version of Material, if were I to bet on it.

[crisbeto]

We're currently testing against TS 2.5.3. I'll give it a shot later with 2.6.

[julianobrasil]

@ORESoftware,

I am on tsc Version 2.6.1

But your setup shows 2.4.2 (should not be problem at all). Are you sure you've tested it against a greater typescript version?

[Diaaz]

I am having the same problem with ts 2.6.2.

[julianobrasil]

@angular/cdk: 5.0.2

@ORESoftware, upgrade @angular/cdk => 5.2.0. Currently, it must match material version and TemplatePortal is part of cdk.

[ORESoftware]

I had a feeling about that, @julianobrasil thank you.

one thing that might be good, is in the postinstall, warn users if @angular/cdk is behind @angular/material, or vice versa?

[julianobrasil]

@ORESoftware, this should be answered by some actual member of material team. @crisbeto is already subscribed to this issue and maybe he can provide some more accurate info than I can.

But I think it's plausible marking cdk as a dependency of material and throw an error when the correct version of cdk is not installed.

[crisbeto]

@ORESoftware I tried updating to TS 2.6 and I couldn't reproduce the error, so it's probably the version mismatch that @julianobrasil mentioned.

[ORESoftware]

@julianobrasil @crisbeto I think this is what peerDependencies is for. Perhaps @angular/cdk should be a peer dependency of @angular/material and/or vice versa? I assume you can tie them together so that they always be at the same version?

[ORESoftware]

In other words, I have this right now:

   "@angular/animations": "^5.0.0",
    "@angular/cdk": "^5.2.0",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/flex-layout": "^2.0.0-beta.12",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/material": "^5.2.0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.0.0",

but don't they all get bumped up at the same time? Shouldn't I have 5.2.0, for all of them?

[ORESoftware]

So is there a way to install all @angular deps to the same version, something like this:

npm install -S @angular/*@latest

or whatever lol...I asked a question about this on SO:
https://stackoverflow.com/questions/48674290/install-all-organization-angular-dependencies-in-package-json-to-same-version/48674488

[willshowell]

@ORESoftware it is already marked as a peer dependency:

https://github.com/angular/material2-builds/blob/b0e15018e30bdf52273e3dfc6b3014dffba8d1c1/package.json#L24-L28

[the1mills]

Thanks Will, as I mentioned above, is there a reliable way to update all @angular/* deps to 5.2.0?

npm update @angular/* @5.2.0

Or something like that. Thatd be handy if you ask me.

[willshowell]

I wouldn't say _reliable_ but here is one option to update all your angular deps to latest. Maybe a start?

cat package.json | grep '@angular/' | sed 's/"//' | sed -E 's/".+//' | xargs npm update

[ORESoftware]

@willshowell seems error prone to me, I personally get cold feet with bash code like that

I think I will write a node.js script to do it, I can't think of a good way to do it with bash

one problem I just ran into tho, is that this dep is not in version sync:

"@angular/flex-layout": "^2.0.0-beta.12",

so I guess maybe install each one by one and if it fails just log something, idk

[nhhockeyplayer]

happening with me on [email protected]

[ORESoftware]

I guess another solution would just to use "skipLibCheck": true as compiler option in the tsconfig.json file(s)?

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