Repository navigation
[ivy]: experimentalIvy flag generates an app with no change detection #13024
Description
Bug Report or Feature Request (mark with an x)
- [x] bug report -> please search issues before submitting
- [ ] feature request
Command (mark with an x)
- [x] new
- [ ] build
- [ ] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc
Versions
Angular CLI: 7.1.0-rc.0
Node: 8.11.3
OS: darwin x64
Angular: 7.1.0-rc.0
Repro steps
Generate a new app with experimentalIvy
ng new ivy-cd --experimental-ivy --defaults
cd ivy-cd
$(npm bin)/ivy-ngcc
ng serve --aot
add a simple setTimeout in app.component.ts like:
constructor() {
setTimeout(() => {
console.log('set timeout');
this.title = 'hello';
}, 2000);
}will result in a trace in the browser console, but no update in the DOM. It looks like change detection is not run. After discussing with @jasonaden on Slack, he confirms that if the app is bootstrapped using renderComponent (as it is currently when using the experimentalIvy flag) then CD is not running. But he pointed out that using platformBrowser fixes it, and indeed it does.
Desired functionality
The experimentalIvy flag could be simplified to probably just add the Angular compiler option in tsconfig.app.json but the rest could be removed and use the default bootstrap mechanism.
Mention any other details that might be useful
I can submit a PR if the CLI team agrees.
@jasonaden asked me to also cc @alxhub for his input.
Activity
klimentru1986 commentedon Dec 17, 2018
@cexbrayat try to use markDirty function. Example here.
Or you can do it in bowser console
cexbrayat commentedon Dec 17, 2018
@klimentru1986 Yes this is possible, but the point of this issue is to revert the change to the bootstrap setup that the
experimentalIvyflag adds. It is now not necessary to usemarkDirtyif you bootstrap the app usingplatformBrowserinstead ofrenderComponent.IgorMinar commentedon Dec 20, 2018
Given that we want to roll out ivy as backwards compatible solution, I think this proposal makes sense.
So the way this would work is that you
ng newa new app in a normal way. Turn on enableIvy in tsconfig, runngcc, and then the toolchain usesngtscto build the app with ivy.eventually we need to figure out how to integrate
ngccinto this workflow more tightly so that it's not a step developer needs to do explicitly, but that will be a bigger change and should be handled separately.feat(@schematics/angular): `experimentalIvy` should generates backwar…
angular-automatic-lock-bot commentedon Sep 9, 2019
This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.
Read more about our automatic conversation locking policy.
This action has been performed automatically by a bot.
feat(@schematics/angular): `experimentalIvy` should generates backwar…