Fails to find dependencies after upgrade to Angular 10
marklbarlow opened this issue · 20 comments
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.
Yep, seeing this too
I solved this on my machine by removing the node_modules folder and reinstall npm i
Sorry, that did not solve it for me
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:
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
According to this post we should not be setting this post install script. Is there another answer? angular/angular#38003 (comment)
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.
It is disappointing to hear the solution is something the Angular team says not to do expect in this 1 special use case.
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.
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.
- create an application with your CLI
- integrate angular playground as usual with "ng add angular-playground"
- create at least 1 playground app to test a component
- try to start playground -> it will usually work as thought
- delete node-modules
- reinstall packages with npm install
- start angular playground -> it fails with this error message about all the dependencies missing. it will show an error for each sandbox component
- go to your angular.json "playground" config to the "sourceRoot" entry
- point the entry to a path, where no sandbox files exists
- restart angular playground
- it will show playground main page with no components
- revert the config change in "sourceRoot" back to "src"
- 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.
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.
Now on ng12, how are we doing here?
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.
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.
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.
Great to hear @JustinCouto . It's been my favorite so far, especially since it's native Angular.
@jornare @JerryDoubleU Angular Playground has been updated for Angular 12. Just run ng-update