Comments (20)
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.
from angular-playground.
@jornare @JerryDoubleU Angular Playground has been updated for Angular 12. Just run ng-update
from 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.
from angular-playground.
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
from angular-playground.
Sorry, that did not solve it for me
from angular-playground.
from angular-playground.
@rekoch This absolutely fixed my problem! Thank you so much for researching this!
from angular-playground.
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.
from angular-playground.
Now on ng12, how are we doing here?
from angular-playground.
Great to hear @JustinCouto . It's been my favorite so far, especially since it's native Angular.
from angular-playground.
Yep, seeing this too
from angular-playground.
I solved this on my machine by removing the node_modules folder and reinstall npm i
from angular-playground.
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
from angular-playground.
Awesome - that fixed it @lurock. Thanks!
from angular-playground.
According to this post we should not be setting this post install script. Is there another answer? angular/angular#38003 (comment)
from angular-playground.
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.
from angular-playground.
It is disappointing to hear the solution is something the Angular team says not to do expect in this 1 special use case.
from angular-playground.
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.
from angular-playground.
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.
from angular-playground.
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.
from angular-playground.
Related Issues (20)
- Jest is not in the devDepenendencies HOT 1
- ERROR angular-playground.ts(10,25) - Error during template compile of 'PlaygroundModule' [0] (7.1.1) HOT 2
- How to add a global language selector that can be used in all sandboxes HOT 1
- --check-visual-regressions should fail when some snapshots are missing HOT 1
- "playground-app" component must have default change detection HOT 1
- Getting errors after update to Angular 12 and Angular Playground 8.1.0 HOT 6
- Example playground not running, not updated to v8.1.1 HOT 1
- Unable to start playground, scss loading error HOT 1
- Can't resolve 'core-js/proposals/reflect-metadata' in Angular 13 HOT 2
- Component never resolves items from AsyncPipe HOT 1
- npm 8 dependency fails on outdated rxjs packages HOT 1
- check visual regression fails HOT 4
- Inflexible Assignment to <title> Element
- Custom builder HOT 1
- Upgrade to Angular 14 gives ng serve 'Unknown argument: publicHost' error when running playground HOT 2
- Playground not showing icon outline of Material
- --check-visual-regressions not working in Jest 28 HOT 9
- Angular 15 HOT 1
- Add explanation to readme about the distinction between playground and storybook HOT 1
- Documentation missing HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from angular-playground.