Skip to content

Broken demo on Dynamic Component Loader documentation article #21903

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
dankellett opened this issue Jan 30, 2018 · 9 comments
Closed

Broken demo on Dynamic Component Loader documentation article #21903

dankellett opened this issue Jan 30, 2018 · 9 comments

Comments

@dankellett
Copy link

dankellett commented Jan 30, 2018

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Feature request
[x] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

The "live demo" and downloadable demo linked on the documentation page titled "Dynamic Component Loader" does not function, nor does the downloadable demo.

Expected behavior

The demo works

Minimal reproduction of the problem with instructions

Follow the "live example" link that shows at the top or bottom of the article here or go straight to live example link here

What is the motivation / use case for changing the behavior?

Demo is broken

Environment


Angular version: X.Y.Z


Browser:
- [x] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [x] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

@ericmartinezr
Copy link
Contributor

What do you mean by "broken"? See #17158

@dankellett dankellett changed the title Broken live example on Dynamic Component Loader documentation article Broken demo on Dynamic Component Loader documentation article Jan 30, 2018
@dankellett
Copy link
Author

dankellett commented Jan 30, 2018

Different symptom - Logs are showing "ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked." However, it is adblocker related. Disabling uBlock resolves this. This is an concern, since Angular is used to build many enterprise applications and many end users will have adblockers installed as a company infosec policy.

Should I just close this issue out since it seems related to the issue you linked?

@mlc-mlapis
Copy link
Contributor

@dankellett ... it is not related to any adblocker.

@dankellett
Copy link
Author

I see what you mean. The app runs with Adblocker disabled but it is still producing the console error with adblockers disabled. This suggests that these are likely two different issues.

So the symptom is solely that this functionality in the demo doesn't work when adblocker is running, which seems to be tracked in #17158.

@mlc-mlapis
Copy link
Contributor

mlc-mlapis commented Jan 30, 2018

@dankellett ... this is the only change that is enough to solve the problem in thit case ... ngOnInit() instead of ngAfterViewInit() is the most simple solution ... but be careful - not in every similar case ...

export class AdBannerComponent implements OnDestroy, OnInit {
   ...
   constructor(private componentFactoryResolver: ComponentFactoryResolver) { }

   ngOnInit() {
      this.loadComponent();
      this.getAds();
   }
   ...
}

@richadr
Copy link

richadr commented Feb 3, 2018

For people coming from Google, https://blog.angularindepth.com/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4 helped me understand what's going on. ngOnInit fixed it.

P.S.: while you're at it... currentAddIndex should become currentAdIndex (not just in the example code, also referenced in docs), app-add-banner should be appAdBanner and there appears to be an unused subscription field in AdBannerComponent that can be removed.

@Yerkon
Copy link
Contributor

Yerkon commented Feb 5, 2018

@dankellett, Can you try this solution: #22020?

@kapunahelewong
Copy link
Contributor

Hey, thanks for finding this @dankellett. I learned something new! 👍

@ngbot ngbot bot added this to the needsTriage milestone Feb 26, 2018
alexeagle pushed a commit that referenced this issue Feb 28, 2018
leo6104 pushed a commit to leo6104/angular that referenced this issue Mar 25, 2018
@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 13, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

7 participants