Components: Illegal state: Could not load the summary for directive ObserveContent

[Splaktar]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Angular Material and the CDK's latest release/master is compatible with Angular 5.0.0-rc.7+ and Angular CLI 1.5.0-rc.5+.

What is the current behavior?

Build fails with the following error:

ERROR in Error: Illegal state: Could not load the summary for directive ObserveContent in /Users/splaktar/Git/tf/webapp/node_modules/@angular/cdk/observers/typings/index.d.ts.

What are the steps to reproduce?

Unable to reproduce in Stackblitz. Closest I came was https://stackblitz.com/edit/angular-material-with-angular-v5 which gives no errors.

I was unable to get @angular/flex-layout to build since it requires a version from master or angular/flex-layout-builds which isn't accessible to Stackblitz (since not on NPM). I'm not having that problem in my local build.

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

Dev and production builds passing.

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

Angular CLI: 1.5.0-rc.5
Node: 6.11.0
OS: darwin x64
Angular: 5.0.0-rc.7
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, platform-server, router
... service-worker

@angular/cdk: 2.0.0-beta.12-0ea4370
@angular/cli: 1.5.0-rc.5
@angular/flex-layout: 2.0.0-beta.9-99e7450
@angular/material: 2.0.0-beta.12-0ea4370
@angular-devkit/build-optimizer: 0.0.31
@angular-devkit/core: 0.0.20
@angular-devkit/schematics: 0.0.34
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.0-rc.5
@schematics/angular: 0.0.48
typescript: 2.4.2
webpack: 3.8.1

I also tried with CDK and material2 on beta.12.

Is there anything else we should know?

No

[jelbourn]

I just brought up material.angular.io w/ Angular 5 RC7, CLI 1.5 RC5, and beta.12 material/cdk and everything worked as expected (tabs use observeContent).

Don't have any flex-layout involved- could that be related?

[Splaktar]

Possibly, here are my dependencies

  "dependencies": {
    "@angular/animations": "5.0.0-rc.7",
    "@angular/cdk": "github:angular/cdk-builds",
    "@angular/common": "5.0.0-rc.7",
    "@angular/compiler": "5.0.0-rc.7",
    "@angular/core": "5.0.0-rc.7",
    "@angular/flex-layout": "github:angular/flex-layout-builds#2ec7c6265aeccd88c3323307d17596b5f537457d",
    "@angular/forms": "5.0.0-rc.7",
    "@angular/http": "5.0.0-rc.7",
    "@angular/material": "github:angular/material2-builds",
    "@angular/platform-browser": "5.0.0-rc.7",
    "@angular/platform-browser-dynamic": "5.0.0-rc.7",
    "@angular/platform-server": "5.0.0-rc.7",
    "@angular/router": "5.0.0-rc.7",
    "@angular/service-worker": "5.0.0-rc.7",
    "angularfire2": "4.0.0-rc.2",
    "classlist.js": "1.1.20150312",
    "core-js": "2.4.1",
    "firebase": "4.3.1",
    "hammerjs": "2.0.8",
    "rxjs": "5.5.1",
    "web-animations-js": "2.3.1",
    "zone.js": "0.8.18"
  },
  "devDependencies": {
    "@angular/cli": "1.5.0-rc.5",
    "@angular/compiler-cli": "5.0.0-rc.7",
    "@angular/language-service": "5.0.0-rc.7",
    "@types/express": "4.0.39",
    "@types/glob": "5.0.33",
    "@types/gulp": "4.0.5",
    "@types/jasmine": "2.6.2",
    "@types/jasminewd2": "2.0.3",
    "@types/node": "6.0.60",
    "codelyzer": "3.2.2",
    "gulp": "3.9.1",
    "gulp-rename": "1.2.2",
    "jasmine-core": "2.8.0",
    "jasmine-spec-reporter": "4.2.1",
    "karma": "1.7.1",
    "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",
    "npm-check": "5.4.5",
    "protractor": "5.2.0",
    "stylelint": "8.2.0",
    "ts-node": "3.3.0",
    "tslint": "5.8.0",
    "typescript": "2.4.2",
    "yargs": "6.6.0"
  }

[DrRefactor]

Try updating core-js, seems to be reason of error disappearing in my case.
Also try removing allowjs from tsconfig.json.

[Splaktar]

@DrRefactor thank you, unfortunately that did not work for me (2.5.1). I tried a full clearing and reinstalling of node_modules/ as well. Then I tried updating to the latest rxjs and typescript but kept getting the same failure.

[jeroenouw]

Same problem here

[jelbourn]

Is anyone able to share a production? (even a full repo push with build steps would be helpful)

[Splaktar]

I will continue trying to put something together today. I can't share my full repo, so I'll have to keep fighting with Stackblitz to try and get the right dependencies installed. Or have to go to Plunkr and mess with SystemJS :(

I tested again today with the latest builds + Angular v5 rc.8 and CLI rc.6. Same issue remains.

[DrRefactor]

Check my dependencies, with those I get no error, maybe fixed version of cdk & material?

"dependencies": {
    "@angular/animations": "^5.0.0-rc.8",
    "@angular/cdk": "^2.0.0-beta.12",
    "@angular/common": "^5.0.0-rc.8",
    "@angular/core": "^5.0.0-rc.8",
    "@angular/forms": "^5.0.0-rc.8",
    "@angular/http": "^5.0.0-rc.8",
    "@angular/material": "^2.0.0-beta.12",
    "@angular/platform-browser": "^5.0.0-rc.8",
    "@angular/platform-browser-dynamic": "^5.0.0-rc.8",
    "@angular/router": "^5.0.0-rc.8",
    "@asymmetrik/ngx-leaflet": "^2.5.0",
    "@ngrx/core": "^1.2.0",
    "@ngrx/effects": "^4.1.0",
    "@ngrx/store": "^4.1.0",
    "@types/leaflet": "^1.2.1",
    "chart.js": "^2.6.0",
    "core-js": "^2.5.1",
    "d3": "^4.10.0",
    "date-fns": "^1.29.0",
    "hammerjs": "^2.0.8",
    "leaflet": "^1.2.0",
    "ng-pick-datetime": "^5.0.0-beta.10",
    "ng2-charts": "^1.6.0",
    "rxjs": "^5.5.2",
    "uglify-js": "^2.8.29",
    "zone.js": "^0.8.17"
  },
  "devDependencies": {
    "@angular/cli": "^1.5.0-rc.6",
    "@angular/compiler": "^5.0.0-rc.8",
    "@angular/compiler-cli": "^5.0.0-rc.8",
    "@types/d3": "^4.10.0",
    "@types/jasmine": "2.5.38",
    "@types/node": "^6.0.88",
    "codelyzer": "~2.0.0",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.1.1",
    "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.5.3"
  }

[Splaktar]

@DrRefactor thank you for sharing those dep versions. I tried again with material and cdk set to 2.0.0-beta.12, but got the same error.

I tried flex-layout versions 2.0.0-beta.8, 2.0.0-beta.9, and the latest from flex-layout-builds. Same issue.

I tried downgrading my ts-node and codelyzer, but no luck.
Tried upgrading typescript to 2.5.3, same error.

[Splaktar]

Is there a reason that the typings are included in two different places in the installed Node module?

Here you can see that I have the typings information in node_modules/@angular/cdk/observers/typings/ and the same exact files in node_modules/@angular/cdk/typings/observers. This seems to mirror the behavior of @angular/material as well.

[Splaktar]

Related:
https://github.com/angular/angular/issues/15506
https://github.com/angular/angular/issues/17477

[jelbourn]

The duplicate typings are just an artifact from changing the build too many times; most of the stuff under the root "typings" should be needed

[jelbourn]

Also you probably won't ever be able to reproduce on stackblitz since it's almost certainly AOT-related

[DrRefactor]

What is your node version? I have recently updated it to v8.8.1 as I have had some errors with LTS version which disappeared in 8.8.1.

[Splaktar]

The OP says Node: 6.11.0 but I've also been trying with v8.8.1 yesterday with the same errors. I've used npm 3.10.10 and 5.5.1.

[Splaktar]

In dev mode, this is working with the 5.0.0 release and the latest 1.5.0 release of the CLI. It looks like AOT by default in ng serve mode was backed out and it's doing a JIT build which passes.

However, when I try to do my AOT production build, I'm still seeing this error:

ERROR in Error: Illegal state: Could not load the summary for directive CdkObserveContent in /Users/splaktar/Git/tf/webapp/node_modules/@angular/cdk/observers/typings/index.d.ts.

Note that the directive name is prepended with Cdk now in the latest nightly build.

[Splaktar]

OK, after numerous hours working on a reproduction and then changing code/config one at a time and rebuilding in AOT mode... I have finally solved this.

In my tsconfig.app.json file, I had the following:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    ...
    "rootDir": ".",
    ...
  },
  ...
}

This had been here for 6+ months w/o any issues.

According to the TypeScript docs, this flag is for:

--rootDir | string | (common root directory is computed from the list of input files) | Specifies the root directory of input files. Only use to control the output directory structure with --outDir.

I have no idea if this was something that was part of the CLI at some point, or if it was some custom config added to fix a previous issue.

But just removing this single line of config, and my AOT build failures with the CDK are now solved!

[mohyeid]

@Splaktar thanks a lot. This solved my issue

[klausj]

In my case it did not help.
I have
"rootDir": "src"
in my tsconfig and cannot simply remove this line.

[r-havelka]

@klausj I was having the same issue, when I removed "rootDir": "src" I was getting 'Browser' does not contain a valid alias configuration. To solve this I saw that it was erroring from the uirouter/angular library. Reverting to an earlier version (1.0.0-rc.0) fixed the issue.

[skytouch]

I'm facing the same problem. any fix for this?

[lubos-bistak]

I can't just remove "rootDir": "src", so any news how to fix this issue?

[Aaltuj]

Any progress on this? I have the same issue and not able to remove the rootdir

[Xen3r0]

Hi,

I have the same problem, a version for fix this is schedule?

My tsconfig.app.json:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",
    "module": "es2015",
    "types": [
      "node",
      "jasmine",
      "core-js"
    ]
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts",
    "**/*.mock.ts",
    "**/*.stub.ts"
  ]
}

Error message on build:

ERROR in : Illegal state: Could not load the summary for directive CdkObserveContent in /home/manuel/public_html/winlassie-ihm/node_modules/@angular/cdk/observers/typings/index.d.ts.

• Angular version: ^5.2.8
• Angular material & cdk version: ^5.2.3

Thanks

[Splaktar]

No there is no progress on this issue. It is closed. No one is working on it.

You may want to post on StackOverflow first as this issue is generally caused by a misconfiguration of TypeScript in your specific application and not directly related to Angular Material.

If that is unsuccessful and you are sure that your TypeScript configuration is complete (and you've consulted the TypeScript docs), then please open a new issue with a Stackblitz or GitHub demo where the team can reproduce and debug the issue.

[eydrian]

I don't know, where this came from, but in my case it was a tsconfig problem:

I hat the following:

"skipTemplateCodeGen": true,

instead of:

"skipTemplateCodegen": true,

in "angularCompilerOptions" in tsconfig.lib.ts

probably got copied from somewhere by accident.

[rhalff]

I can confirm that setting skipTemplateCodegen to true will make the error go away.

But this is because the error will only appear if skipTemplateCodegen is set to false.

$ grep skipTemplateCodegen node_modules/@angular -R
node_modules/@angular/compiler-cli/src/transformers/compiler_host.js:            // if skipTemplateCodegen is set and fullTemplateTypeCheck is not yet set,
node_modules/@angular/compiler-cli/src/transformers/compiler_host.js:            if (this.options.skipTemplateCodegen && !this.options.fullTemplateTypeCheck) {
node_modules/@angular/compiler-cli/src/transformers/api.d.ts:    skipTemplateCodegen?: boolean;
node_modules/@angular/compiler-cli/src/perform_compile.js:            if (options.skipTemplateCodegen) {
node_modules/@angular/compiler-cli/src/ngtools_api2.d.ts:    skipTemplateCodegen?: boolean;

While debugging I also ended up in transformers/compiler_host.js, but didn't find the actual reason for failure yet.

[HarshMathur]

I have also ran into this issue when I installed one npm package called 'ng-pick-datetime'.
I managed to solve this issue by adding these two paths in include array of tsconfig.json:

{
  "compileOnSave": false,
  "include": ["node_modules/ng-pick-datetime/node_modules/@angular/cdk/**/typings/index.d.ts", "node_modules/@angular/cdk/**/typings/index.d.ts", "src/**/*.ts"],
  "exclude": ["**/*.spec.ts"],
  "compilerOptions": {
       ........
  }
}

So I think it can fix the issue.

[ghost]

any other solves? editing the json doesn't work for me

[csaszika]

Same by @hansl . I have this issue with CdkAriaLive:

ERROR in : Illegal state: Could not load the summary for directive CdkAriaLive in ...../node_modules/@angular/cdk/a11y/typings/index.d.ts.

I tried to modify tsconfig.

[Dyinfalse]

I don't have the 'rootDir' option in 'tsconfig.json',
I tried to add ,But there is still this mistake.
Then I tried

ng build

Instead of ng build --prod
It helps me.

[Splaktar]

@csaszika please open a new issue with a reproduction. Go Pats!

[csaszika]

@Splaktar sorry for late answer, after some investigation I have created a new project with upgraded versions so with angular(7.2.13) and material(7.3.8) and I cannot reproduce the issue anymore. If I meet with the same issue, then I update my comment. Thanks for comments

[WardLIN]

@HarshMathur Thank you for your solution , it really helps me a lot . I think default tsconfig.ts doesn't include those *.ts in node_modules document , since it doesn't have "files" and "includes" options.

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