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

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

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.

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.

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

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

Now on ng12, how are we doing here?

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.

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

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 @jrduttonhttps://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 GitHubhttps://github.com/SoCreate/angular-playground/issues/262#issuecomment-668960072, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ABGZQD7QFIJZ5Z45UPCZ3HLR7DHMBANCNFSM4PI3BJJQ.

Sorry, that did not solve it for me