0

For an existing MVC application we're bootstrapping our Angular app module using a querySelector. 

@Component({
  selector: 'my-app',
  template: document.querySelector("my-app").innerHTML
})

Components get rendered and everything is well. However, when the innerHTML contains routerlinks, clicking them does not result in a navigation to that route.

Plunker comparison with querySelector vs without querySelector

ndoes
  • 667
  • 5
  • 16
  • In the Inner html in your a tags configure the router links like this `LINK` – Rahul Singh Jul 20 '17 at 08:18
  • Thanks, that gets rid of the error. Routing is still not working as expected though. I updated the question. – ndoes Jul 20 '17 at 08:29
  • expected means what are you expecting? @ndoes – Rahul Singh Jul 20 '17 at 08:30
  • Compare [without querySelector](https://plnkr.co/edit/iJFpY8ieFCSEJYPKWrTT?p=preview) vs. [with querySelector](https://plnkr.co/edit/Ad9kQGc3aqqazT83bodv?p=preview) – ndoes Jul 20 '17 at 08:34
  • it too huge can you try what do you mean by expected in short – Rahul Singh Jul 20 '17 at 08:54
  • Clicking on the navigation buttons does not result in a navigation to that route. – ndoes Jul 20 '17 at 09:03
  • Angular completely ignores content you add dynamically at runtime (except some sanitization for security reasons). If you want anything Angular-specific happen with your markup, you need to add it to a components template before the component is compiled. If you want to do this at runtime, you need to compile the component at runtime. There are several questions that address this scenario. – Günter Zöchbauer Jul 20 '17 at 09:14
  • @GünterZöchbauer Yea, I figured this was the problem, but since components are getting rendered it would seem Angular is selective in what it ignores. – ndoes Jul 20 '17 at 09:25

0 Answers0