Fails to find dependencies after upgrade to Angular 10 about angular-playground

[JustinCouto]

I can assure you we are still putting energy into Playground. Our entire company is built on top of using it. Now that ng12 is final, we will be updating it to work on this version. We are also always open to contributions.

[JustinCouto]

@jornare @JerryDoubleU Angular Playground has been updated for Angular 12. Just run ng-update

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

[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

[jrdutton]

Sorry, that did not solve it for me

[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 <[email protected]> Sent: Tuesday, August 4, 2020 8:34:24 PM To: SoCreate/angular-playground <[email protected]> Cc: Subscribed <[email protected]> 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>.

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

[jornare]

Now on ng12, how are we doing here?

[jornare]

Great to hear @JustinCouto . It's been my favorite so far, especially since it's native Angular.

[jrdutton]

Yep, seeing this too

[jornare]

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

[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

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

[JerryDoubleU]

Now on ng12, how are we doing here?

Haha, not well. Ivy is forced now :)
I had no success running angular-playground on ng12.
I'm still looking for some solution, I'll post something if I manage to run it.

[jornare]

Cool, it crashed hard on me to. It hasn't been much activity here lately so maybe it's time to move over to Storyboard since that's what's embraced by nx.