1

I am having some trouble trying to find a workaround to this:

In one hand I've got defined my routes like the following:

const appRoutes: Routes = [
    { path: '**', component: TemplateComponent, pathMatch: 'full' }
];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

So based on the URL the TemplateComponent would fetch a different html template:

@Component({
    templateUrl: this.document.location.pathname
})

In the other hand, my backend server generates some HTML output like the following:

<nav>
    <a routerlink="/content/mysite/t1.html" href="/content/mysite/t1.html">Template 1</a>
    <a routerlink="/content/mysite/t2.html" href="/content/mysite/t2.html">Template 2</a>
    <a routerlink="/content/mysite/t3.html" href="/content/mysite/t3.html">Template 3</a>
</nav>

So the issue I am facing is that when clicking on any of the generated links, Angular does not fetches the template, nor initialises the component, this is done only once when the AppModule is loaded.

I found some articles discussing about having to implement a subscriber, although after going through the Angular 4 documentation and unsuccessfully trying different things I ended up lost.

It would be great if anyone could shed some light.

Jose Berciano
  • 163
  • 2
  • 3
  • 13
  • 1
    This is not what the router was designed for and not how Angular handles components. To say that the results will be undefined is an understatement. – Reactgular Jul 01 '17 at 02:52
  • You are right, but since I cannot change the way the backend is behaving I was relaying on some specific workaround that I still have not found to implement the router logic. With AngularJS this could be easily done since each template would have their own Controller and there is no conflicts at all. But since Angular needs to know the Component that is managing the link upfront I cannot see they way this can be achieved. – Jose Berciano Jul 01 '17 at 13:10

0 Answers0