Angular-cli: Cannot build AOT - 'Illegal state: Could not load the summary for directive CdkTrapFocus' [Library]

[Tyler-V]

Versions

@angular-devkit/architect          0.5.8
@angular-devkit/build-angular      0.5.13
@angular-devkit/build-ng-packagr   0.5.13
@angular-devkit/build-optimizer    0.5.13
@angular-devkit/core               0.5.8
@angular-devkit/schematics         0.5.8
@angular/cdk                       5.2.5
@angular/cli                       6.0.0-rc.6
@angular/material                  5.2.5
@ngtools/json-schema               1.1.0
@ngtools/webpack                   6.0.0-rc.11
@schematics/angular                0.5.8
@schematics/update                 0.5.8
ng-packagr                         2.4.2
rxjs                               6.0.0
typescript                         2.7.2
webpack                            4.6.0

Repro steps

ng build --prod

Observed behavior

PS C:\Users\Tyler\Documents\GitHub\@ngx-easy> ng build --prod

Date: 2018-05-03T20:42:34.690Z
Hash: 8211a34b9047475b0c8e
Time: 10706ms
chunk {0} runtime.6afe30102d8fe7337431.js (runtime) 1.05 kB [entry] [rendered]
chunk {1} styles.dbf5cc60be95fada7422.css (styles) 43.6 kB [initial] [rendered]
chunk {2} polyfills.7b179b8b06c2bb8cdc21.js (polyfills) 130 bytes [initial] [rendered]
chunk {3} main.aad69072215eb1da4e1b.js (main) 128 bytes [initial] [rendered]

ERROR in : Illegal state: Could not load the summary for directive CdkTrapFocus in C:/Users/Tyler/Documents/GitHub/@ngx-easy/projects/easy-grid/node_modules/@angular/cdk/a11y/typings/index.d.ts.

Building Angular Package
Building entry point '@ngx-easy/virtual-scroll'
Cleaning build directory
Rendering Stylesheets
Rendering Templates
Compiling TypeScript sources through ngc
Bundling to FESM15
Bundling to FESM5
Bundling to UMD
Minifying UMD bundle
Relocating source maps
Copying staged files
Writing package metadata
Removing scripts section in package.json as it's considered a potential security vulnerability.
Creating package .tgz
Built @ngx-easy/virtual-scroll
Built Angular Package!
- from: C:\Users\Tyler\Documents\GitHub\@ngx-easy\projects\easy-virtual-scroll
- to:   C:\Users\Tyler\Documents\GitHub\@ngx-easy\dist\easy-virtual-scroll
Building Angular Package
Building entry point '@ngx-easy/grid'
Cleaning build directory
Rendering Stylesheets
Rendering Templates
Compiling TypeScript sources through ngc
Bundling to FESM15
'QueryList' is imported from external module '@angular/core' but never used
'EasyVirtualScrollComponent' is imported from external module '@ngx-easy/virtual-scroll' but never used
'MatMenu' is imported from external module '@angular/material/menu' but never used
Bundling to FESM5
Bundling to UMD
No name was provided for external module 'rxjs' in options.globals – guessing 'rxjs'
No name was provided for external module 'lodash' in options.globals – guessing 'lodash'
No name was provided for external module '@ngx-easy/virtual-scroll' in options.globals – guessing 'virtualScroll'
Minifying UMD bundle
Dropping unreachable code [0:158,8]
Declarations in unreachable code! [0:158,8]
Dropping unreachable code [0:26,0]
Declarations in unreachable code! [0:26,0]
Relocating source maps
Copying staged files
Writing package metadata
Removing scripts section in package.json as it's considered a potential security vulnerability.
Creating package .tgz
Built @ngx-easy/grid
Built Angular Package!
- from: C:\Users\Tyler\Documents\GitHub\@ngx-easy\projects\easy-grid
- to:   C:\Users\Tyler\Documents\GitHub\@ngx-easy\dist\easy-grid
PS C:\Users\Tyler\Documents\GitHub\@ngx-easy>

Desired behavior

Successfully build app and projects libraries

Mention any other details that might be useful (optional)

I am using the latest cli and trying to build a library with the ng generate library command.

I'm able to serve and build the projects without issue (minus https://github.com/dherges/ng-packagr/issues/822)

I have my demo app for displaying these libraries in the app.component of my project where I have generated two libraries, the demo app will not build with the --prod flag however.

I believe this is a .tsconfig issue based on the comments received in opening https://github.com/angular/material2/issues/11124

I am opening this issue here as well because I believe there is something maybe missing from the default project settings or to see if anyone else might have an idea on how to fix this.

Thanks!

[Tyler-V]

@hansl This is still an issue in 6.0.0

ERROR in : Illegal state: Could not load the summary for directive Dir in C:/Users/Tyler/Documents/GitHub/@ngx-easy/projects/easy-grid/node_modules/@angular/cdk/bidi/typings/index.d.ts.

```
Angular CLI: 6.0.0
Node: 8.11.1
OS: win32 x64
Angular: 6.0.0
... animations, cdk, common, compiler, compiler-cli, core, forms
... http, language-service, material, platform-browser
... platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.6.0 (cli-only)
@angular-devkit/build-angular 0.6.0
@angular-devkit/build-ng-packagr 0.6.0
@angular-devkit/build-optimizer 0.6.0
@angular-devkit/core 0.6.0 (cli-on
```ly)
@angular-devkit/schematics 0.6.0 (cli-only)
@ngtools/json-schema 1.1.0
@ngtools/webpack 6.0.0
@schematics/angular 0.6.0 (cli-only)
@schematics/update 0.6.0 (cli-only)
ng-packagr 2.4.2
rxjs 6.1.0
typescript 2.7.2
webpack 4.6.0

[filipesilva]

This seems like a bug but we'll need to look at a reproduction to find and fix the problem. Can you setup a minimal repro please?

You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

[Tyler-V]

@filipesilva I tried creating a smaller repo than my library but was unsuccessful to reproduce the error. I regenerated my project from scratch and still see the same issue.

That being said, something I noticed that I can successfully build in --prod when I change my app/ imports around that reference the projects/library.

import { EasyGridModule } from 'projects/grid/src/public_api';

Using this lets me ng serve and make changes in the library with browser refresh, however I cannot build in aot.. I receive the error listed in this issue.

import { EasyGridModule } from '@ngx-easy/grid';

Consuming the published npm package however lets me build the app in aot.

Is this a feature request or user error? I would like to be able to serve my project from the projects/src so I can make changes and quickly deploy the demo when I choose to.

Thanks!

[filipesilva]

I really can't tell if it's a feature request or a bug without a repro. I have no idea what's going on in your project, and haven't seen that error elsewhere... I'm sorry but this is the kind of issue that really needs a repro.

[Tyler-V]

@filipesilva sorry about that, you should be able to clone this

https://github.com/Tyler-V/ngx-easy

You can reproduce with these steps:

[Error]

1. npm i
2. ng build --prod or ng serve --aot
   Results: ERROR in : Illegal state: Could not load the summary for directive Dir in C:/Users/Tyler/Documents/GitHub/@ngx-easy/projects/grid/node_modules/@angular/cdk/bidi/typings/index.d.ts.

[Success]

1. Open src/app/demos/grid/grid.module.ts
2. Uncomment import { EasyGridModule } from '@ngx-easy/grid'; to replace import { EasyGridModule } from 'projects/grid/src/public_api';
3. ng-build --prod
4. Successfully builds without error

[filipesilva]

Heya, going through your repro and finding a couple of odd things:

• you have @ngx-easy/grid in your package.json, but I think it's built in this repo? It shouldn't be a dep then.
• your grid project has @angular/animations/cdk/material in its package.json direct dependencies, but you definitely want all of that as a peer dep.
• I can't build virtual-scroll via ng build virtual-scroll, it will error out with Dependency rxjs must be explicitly whitelisted..
• The production config for ng-packagr is putting stuff in the wrong directory (fix in https://github.com/angular/devkit/pull/895).
• The paths in tsconfig.json for the built libraries are wrong (fix in https://github.com/angular/devkit/pull/895 also).

I don't actually think your demo app is using the libraries in the repo, it is instead installing from npm.

The intended workflow (described in https://github.com/angular/angular-cli/wiki/stories-create-library) would be something like this for your repository:

ng build virtual-scroll
ng build grid
ng build 

The last ng build is the same as ng build ngx-easy since that is the default project. Basically you are building the libraries in the reverse order of dependencies, then building your app.

I tried to fix up the dependencies so this works and pushed my work so far in https://github.com/Tyler-V/ngx-easy/pull/1.

While doing ng build grid I started running into errors :

projects/grid/src/lib/services/easy-grid.service.ts(3,29): error TS2307: Cannot find module '@ngx-easy/virtual-scroll'.
projects/grid/src/lib/easy-grid-table/easy-grid-table.component.ts(3,44): error TS2307: Cannot find module '@ngx-easy/virtual-scroll'.
projects/grid/src/lib/easy-grid-table/easy-grid-table.component.ts(4,54): error TS2307: Cannot find module '@ngx-easy/virtual-scroll'.
projects/grid/src/lib/easy-grid.module.ts(4,41): error TS2307: Cannot find module '@ngx-easy/virtual-scroll'.

These basically say @ngx-easy/virtual-scroll' cannot be found. I think this is a bug in ng-packagr though.

I say this because I tested with ngc as well and it was ok:

• added a ngc script in package.json
• removed flatModuleId and flatModuleOutFile in projects/grid/tsconfig.lib.json
• tried to compile the same library via ngc (npm run ngc -- -p projects/grid/tsconfig.lib.json`)
• compile worked
• changed the @ngx-easy/virtual-scroll path in tsconfig.json to something else (like @not-ngx-easy/virtual-scroll)
• compile failed (proving the path was used in the previous successful compilation)

My bet is that tsconfig support in ng-packagr (which last I checked is experimental) is not correctly using the tsconfig paths (cc @dherges @alan-agius4 since they worked on this). I also tried using [email protected] and this still happened.

So at the moment I am sorry to say we are still blocked. Progress was made though!

A workaround for now is to do npm i ./dist/virtual-scroll.tgz --no-save, this installs the built virtual-scroll so the tsconfig paths don't need to be used. Doing this I could build all libs and then the app successfully.

[alan-agius4]

I will look into this soon, but ng-packagr. Doesn’t respective might not respect the ‘baseUrl’ as it sets it to folder of the entry point. A quick fix I believe is to add an addition path resolution entry to ‘../../dist/virtual-scroll’ as per my comment in @filipesilva PR.

I’ll try to give more details later, as currently I am out.

[filipesilva]

I guess that means that there is an implicit "baseUrl": "./" on the library tsconfig?

That can be problematic though... changing the baseurl changes how the paths are interpreted on extended tsconfigs, and having a different baseUrl on certain parts of a monorepo will either break the app or the tooling (e.g. vscode).

(I have this same answer on https://github.com/Tyler-V/ngx-easy/pull/1 but I think this is the better place for the conversation).

[alan-agius4]

Yeah there is something similar https://github.com/dherges/ng-packagr/blob/master/src/lib/ts/tsconfig.ts

I do think it is problematic, and is something that we should tackle, but I need to understand why it was done in the first place (I am thinking because ng-packagr ships it’s own tsconfig).

Ill see what happens what breaks when removing it.

In mono repos it’s a problem and in fact I had to do two tsconfig https://github.com/alan-agius4/ng-mono-repo-starter/blob/master/tsconfig.build.json

I did a PR to remove this: https://github.com/dherges/ng-packagr/pull/862

[filipesilva]

Awesome @alan-agius4, that was a super quick fix!

[Tyler-V]

That was fast! Thank you @filipesilva / @alan-agius4

ng build virtual-scroll --prod
ng build grid --prod
ng build --prod
ng serve --aot

All working, thanks for the help guys.

[rtm]

Good work getting this resolved. I have the same problem, but am not quite ready to post the details.

As a maintainer myself, I fully understand the strong desire for detailed bug descriptions, dumps of logs, reproducible test cases, and so on. I often demand them myself. At the same time, many of these "bugs" occur in complex systems, many of which are private. It could take hours to strip it down to a shareable repro case.

In this particular case of

Illegal state: Could not load the summary for directive [or component]

I wonder if someone could simply share the logic and situation in which this message is displayed. In other words, what the heck does it mean? What is a "summary"? Who is trying to load it? Why might they not be able to load it? How does loading fail?

I know you're all incredibly busy building your great system, but even though yes, developers like us might be able to figure that out by rummaging through source code, you might be able to answer right away. Such information might be enough for people to point people in the right direction so that they can move ahead and solve the problem themselves.

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

<sub>_This action has been performed automatically by a bot._</sub>