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 ng-packagr/ng-packagr#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 angular/components#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 fix(@schematics/angular): fix scoped library paths  devkit#895).
• The paths in tsconfig.json for the built libraries are wrong (fix in fix(@schematics/angular): fix scoped library paths  devkit#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 Tyler-V/ngx-easy#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 ng-packagr@3.0.0-rc.4 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.