Search code examples
angularangular-router

How to solve unwanted Angular Routing behavior?

The Angular docs provide clear instructions on how to add routing to their apps. I'm getting weird behavior in implementing what should be a page redirect. I've updated NPM, created multiple test servers, and still, when I type in the new page in the URL I get interesting behavior. Sometimes it just stays on app.component and nothing visually happens at all.

Behavior

enter image description here

enter image description here

And the Code

enter image description here

enter image description here

enter image description here

I've used Ionic/Angular for more than a year and have never had issues with Routing. The Rofl component is being accepted by the router, but the HTML of that component is just a <p> tag. When I run "ctrl + f" on the "app.component.html" there is no rofl search term anywhere. Why are "app" and "rofl" components being combined in the view?

Solution

  • The routed content is displayed in place of a <router-outlet></router-outlet> tag.

    As you created your project (ng new myProject) and chose to add the routing feature by selecting the prompt option, a <router-outlet></router-outlet> has been added at the end of your AppComponent template.

    So by routing to '/rofl', it displays the base content of your application (the AppCompnent) followed by the content of the routed component (RoflComponent).