Fails to find dependencies after upgrade to Angular 10

[marklbarlow]

Versions

angular-playground: 7.0.3

    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 10.0.4
Node: 10.13.0
OS: win32 x64

Angular: 10.0.5
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.1000.4
@angular-devkit/build-angular      0.1000.4
@angular-devkit/build-ng-packagr   0.1000.4
@angular-devkit/build-optimizer    0.1000.4
@angular-devkit/build-webpack      0.1000.4
@angular-devkit/core               10.0.4
@angular-devkit/schematics         10.0.4
@angular/cdk                       10.1.0
@angular/cli                       10.0.4
@angular/flex-layout               10.0.0-beta.32
@angular/material                  10.1.0
@ngtools/webpack                   10.0.4
@schematics/angular                10.0.4
@schematics/update                 0.1000.4
ng-packagr                         10.0.3
rxjs                               6.6.0
typescript                         3.9.7
webpack                            4.43.0

Repro steps

• npm install
• npm run playground

Observed Behavior

[ng serve]:
ERROR in The target entry-point "angular-playground" has missing dependencies:

 E:/code/src/app/components/item.component.sandbox

Desired Behavior

Project compiles and playground can be used.

Any other details that may be useful (optional)

Error occurs after upgrading an existing project from Angular 9 to Angular 10.

[jrdutton]

Yep, seeing this too

[jornare]

I solved this on my machine by removing the node_modules folder and reinstall npm i

[jrdutton]

Sorry, that did not solve it for me

[DanWahlin]

I'm seeing the same error (thanks for mentioning it to me @jrdutton). Cleared node_modules and even package-lock.json to start from scratch but still get the error. Example repo here if interested:

https://github.com/DanWahlin/Angular-JumpStart

[JustinCouto]

Hi All, Thanks for mentioning this. We are looking into it. We are using it with Angular 10 without issues. We will let you know once we figure it out. Dan, thanks for the example. It will help. Thank you, Justin Couto CEO @ SoCreate

…

________________________________ From: Dan Wahlin <notifications@github.com> Sent: Tuesday, August 4, 2020 8:34:24 PM To: SoCreate/angular-playground <angular-playground@noreply.github.com> Cc: Subscribed <subscribed@noreply.github.com> Subject: Re: [SoCreate/angular-playground] Fails to find dependencies after upgrade to Angular 10 (#262) I'm seeing the same error (thanks for mentioning it to me @jrdutton<https://github.com/jrdutton>). Cleared node_modules and even package-lock.json to start from scratch but still get the error. Example repo here if interested: https://github.com/DanWahlin/Angular-JumpStart — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub<#262 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/ABGZQD7QFIJZ5Z45UPCZ3HLR7DHMBANCNFSM4PI3BJJQ>.

[lurock]

Try putting a postinstall in your package.json with ngcc as the command. In the scripts section of the package.json add "postinstall": "ngcc"

Then delete your node modules and run npm install

[DanWahlin]

Awesome - that fixed it @lurock. Thanks!

[lslocum]

According to this post we should not be setting this post install script. Is there another answer? angular/angular#38003 (comment)

[lurock]

Currently this solves the issue for running the Angular Playground. We do not have another fix at this time. We are willing to accept pull requests if you have a solution to this issue.

[lslocum]

It is disappointing to hear the solution is something the Angular team says not to do expect in this 1 special use case.

[JustinCouto]

HI @Islocum

It is disappointing to hear the solution is something the Angular team says not to do expect in this 1 special use case.

As we mentioned we would love to take a pull request from you if you would like to dig in and find an answer to this issue. Angular Playground is an open-source tool we built and use heavily at SoCreate. We provide it to the Angular Community as we hope to help other developers be as productive as possible. We don't make money on the tool. With that being said, we commit a substantial amount of resources to continually improve it and keep it up-to-date releasing it in step with new versions of Angular since Angular 2. We plan to continue to do that. As for minor things like this or other features that people want or need, we hope to make this a community effort. If we all work together, this tool can become more amazing over time. We look forward to receiving your commit. Thank you for your interest and passion for Angular and Angular Playground.

[rekoch]

I am not sure if this helps to find the cause of the issue. I played a lot round to find when it does happen.

1. create an application with your CLI
2. integrate angular playground as usual with "ng add angular-playground"
3. create at least 1 playground app to test a component
4. try to start playground -> it will usually work as thought
5. delete node-modules
6. reinstall packages with npm install
7. start angular playground -> it fails with this error message about all the dependencies missing. it will show an error for each sandbox component
8. go to your angular.json "playground" config to the "sourceRoot" entry
9. point the entry to a path, where no sandbox files exists
10. restart angular playground
11. it will show playground main page with no components
12. revert the config change in "sourceRoot" back to "src"
13. restart playground -> it will work again

So somehow it needs first an empty playground page before it can show the sandbox components. i also watched, that while the dependencies error exists, it does not bundle the chunk files. If I read about the ivy compiler
https://angular.io/guide/ivy#ivy-and-universalapp-shell
it looks that maybe there is the reason.

n version 9, the server builder which is used for App shell and Angular Universal has the bundleDependencies option enabled by default. If you opt-out of bundling dependencies you will need to run the standalone Angular compatibility compiler (ngcc). This is needed because otherwise Node will be unable to resolve the Ivy version of the packages

So the easiest way to fix it is to change your tsconfig.playground.json file and add there this lines:

  "angularCompilerOptions": {
    "enableIvy": false
  }

it will no longer use the ivy compiler and it looks like it fixes it. so maybe there is also one tiny config in the playground, where the bundling does not work the right way.

[lslocum]

@rekoch This absolutely fixed my problem! Thank you so much for researching this!

[JustinCouto]

Hey There,

From our understanding, the ngcc will be removed from Angular as soon as libraries support IVY. At that time, this will no longer be an issue. If turning off IVY for playground works better for you, thats great. Thanks rekock for contributing to the conversion.