Skip to content

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

Closed
Closed
Cannot build AOT - 'Illegal state: Could not load the summary for directive CdkTrapFocus' [Library]#10615
Labels
freq2: mediumneeds: repro stepsWe cannot reproduce the issue with the information givenseverity2: inconvenienttype: bug/fixworkaround2: non-obvious

Description

@Tyler-V
Tyler-V
opened on May 3, 2018

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 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!

Activity

  1. Tyler-V
    changed the title [-]Cannot build AOT - 'Illegal state: Could not load the summary for directive CdkTrapFocus'[/-] [+]Cannot build AOT - 'Illegal state: Could not load the summary for directive CdkTrapFocus' [Library][/+] on May 3, 2018
  2. hansl
    added
    type: bug/fix
    freq2: medium
    severity2: inconvenient
    workaround2: non-obvious
    on May 4, 2018

  3. Tyler-V commented on May 4, 2018

    @Tyler-V
    Tyler-V
    on May 4, 2018
    Author

    @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

  4. filipesilva commented on May 10, 2018

    @filipesilva
    filipesilva
    on May 10, 2018
    Contributor

    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.

  5. filipesilva
    added
    needs: repro stepsWe cannot reproduce the issue with the information given
    on May 10, 2018

  6. Tyler-V commented on May 10, 2018

    @Tyler-V
    Tyler-V
    on May 10, 2018
    Author

    @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!

  7. filipesilva commented on May 10, 2018

    @filipesilva
    filipesilva
    on May 10, 2018
    Contributor

    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.

  8. Tyler-V commented on May 10, 2018

    @Tyler-V
    Tyler-V
    on May 10, 2018
    Author

    @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

  9. filipesilva commented on May 11, 2018

    @filipesilva
    filipesilva
    on May 11, 2018
    Contributor

    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.

  10. alan-agius4 commented on May 11, 2018

    @alan-agius4
    alan-agius4
    on May 11, 2018
    Collaborator

    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.

  11. filipesilva commented on May 11, 2018

    @filipesilva
    filipesilva
    on May 11, 2018
    Contributor

    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 Tyler-V/ngx-easy#1 but I think this is the better place for the conversation).

  12. alan-agius4 commented on May 11, 2018

    @alan-agius4
    alan-agius4
    on May 11, 2018
    Collaborator

    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

  13. filipesilva commented on May 11, 2018

    @filipesilva
    filipesilva
    on May 11, 2018
    Contributor

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

  14. Tyler-V commented on May 11, 2018

    @Tyler-V
    Tyler-V
    on May 11, 2018
    Author

    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.

  15. dherges
    added a commit that references this issue on May 11, 2018

    fix: don't override `baseUrl` (#862)

    769b091
  16. Tyler-V
    closed this as completedon May 11, 2018
  17. Brocco
    added 2 commits that reference this issue on May 15, 2018

    fix(@schematics/angular): fix scoped library paths

    d715cc9

    fix(@schematics/angular): fix scoped library paths

    020c1d8
  18. hansl
    added a commit that references this issue on Jun 6, 2018

    fix(@schematics/angular): fix scoped library paths

    745e0da

  19. rtm commented on Jun 6, 2018

    @rtm
    rtm
    on Jun 6, 2018

    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.

  20. corinnekrych
    added a commit that references this issue on Sep 12, 2018

    feat(ng-cli): introduce ng-cli build and fixing angular/angular-cli#1…

    80b8e3e

  21. angular-automatic-lock-bot commented on Sep 8, 2019

    @angular-automatic-lock-bot
    angular-automatic-lock-botbot
    on Sep 8, 2019

    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.

  22. angular-automatic-lock-bot
    locked and limited conversation to collaborators on Sep 8, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    freq2: mediumneeds: repro stepsWe cannot reproduce the issue with the information givenseverity2: inconvenienttype: bug/fixworkaround2: non-obvious

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions