Scully: Content not updated on route change

[msteffl]

🐞 Bug report

I followed the Getting Started docs to setup scully within an angular project. After that I started to modify my project to create a kind of navigation bar with all the routes that are available in my markdown folder and on the same page the scully content.

blog.component.html

<ul>
  <li *ngFor="let page of links$ | async">
    <a [routerLink]="page.route">{{ page.route }}</a>
  </li>
</ul>

<h3>ScullyIo content</h3>
<hr>
<!-- This is where Scully will inject the static HTML -->
<scully-content></scully-content>
<hr>
<h4>End of content</h4>`

blog.component.ts



md5-d90ffb5bf65c8dcbc0860ef4eeab46a0



export class BlogComponent implements OnInit {

  links$: Observable<any> = this.scully.available$;

  ngOnInit() {
    // debug current pages
    this.links$.subscribe(links => {
      console.log(links);
    });
  }

  constructor(private router: Router, private route: ActivatedRoute, private scully: ScullyRoutesService) {
  }
}

Similar to this app https://agitated-swartz-d8a163.netlify.com/ .

Now I am facing the problem that once I click on a routerLink the content gets rendered in scully content. But when I click on a second routerLink the url gets updated, but the content not. Still the same content like the one of the first click. Scully content gets not updated.

I can also reproduce this on the above mentioned app when I go directly to

https://agitated-swartz-d8a163.netlify.com/blog/12-30-2019-blog

Now every route displays same content.

[SanderElias]

@msteffl I can't reproduce your issue. I can see it on your sample tho.
Can you give me access to the sources of that, so I can take a look at what is hapening in your case?

[msteffl]

@SanderElias here you can find the source code of my example project

https://github.com/msteffl/Scully-Example

How to reproduce:

• serve/start static content
• click on /doc/page1 link (scully content from page 1 will appear)
• click on /doc/page2 link (content will not be updated to page 2. Still content from page1)

[SanderElias]

@msteffl I checked out your code, and I need a bit more time. There seems to be something in the way you did set up the routing.
If I put the links inside your blog contents, it works as expected.
you can try by putting [page-2](/docs/page2) inside page1.md
However, somehow the links inside your home-components are not seen. I'm still investigating

[msteffl]

@SanderElias yes putting links directly to blog contents work. But still wondering why it isn't working outside blog contents. Ok thanks.

[geromegrignon]

Facing the same problem with links declared at the root of the router-outlet.

Navigating works from and to another angular component :

• component => component
• component => md rendered file
• md rendered file => component

But it doesn't work from a md rendered file to another one.

example on Netlify : link
github repo : link

[barbados-clemens]

Just passing by, but I experienced something similar locally, when I would have the site up on a specific page with scully content, then rerun scully && scully serve all the scully content would be the same as the page that was currently pulled up in the browser.

Not sure if related or not. but I worked around this by making sure I was on a page that didn't contain <scully-content></scully-content>

[SanderElias]

@geromegrignon Thanks for the additional sample!
@barbados-clemens Thanks for the comment.
Both will help me to go to the bottom of this.

[BrendanBerkley]

Any reason why this might have regressed? I found a similar issue on my scully site:

• If I enter a URL for a page without scully-content, everything works fine
• If I enter a URL for a page with scully-content, it loads the content of that page, but any subsequent scully-content page I go will show the content of the first page

[bufke]

I added a example of it not working with the latest version of Scully @SanderElias (let me know if I should open a new issue instead, but it seems like exactly this problem)

https://gitlab.com/bufke/scully-content-not-loaded

To reproduce

1. Build and serve scully
2. Go to http://localhost:1668/blog/this-is-my-post
3. Notice the link to a news post. Click it
4. You are navigated to http://localhost:1668/news/2020-07-29-news

However scully-content renders the previous page's blog content saying "another blog post" instead of the news post content.

[SanderElias]

@bufke I just downloaded your sample. It's a similar, but yet different issue. In this issue, the navigation was inside the same route (from /blog/x to /blog/y) yours is from /blog/x to /news/y This is a different issue, that indeed deserves its own issue, so please open one. I will add this to our test suite.
BTW, thanks for the reproduction repo, which really helps to understand the issue.