Not able to load html page using angular router

Question

I was trying to integrate one of my html page in the demo my-app of Angular-Quickstart. I have static html page shareloc.component.html and specified router to load this.

here is my app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from './app.component';
import { ShareLocComponent } from './shareloc.component';

const appRoutes: Routes = [
  { path: 'locsharing/:id', component: ShareLocComponent }
];

@NgModule({
  declarations: [
    ShareLocComponent,
    AppComponent,
  ],
  imports: [
    BrowserModule
    ,RouterModule.forRoot(
      appRoutes,
      { enableTracing: true } // <-- debugging purposes only
    )
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

The shareloc.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-container',
  templateUrl: './shareloc.component.html',
  styleUrls: ['./css/shareloc.css']
})

export class ShareLocComponent {
  constructor(){
    console.log('Suresh here!');
  }
  title = 'My First Angular App';
}

On http://localhost:4200/locsharing/1 URL landing, I can see the AppComponent's page which is created with the demo of my-app in the tutorial and not able to view the expected shareloc.component.html.

Please ignore my bad explanation as I have less knowledge about the angular.

Answer 1

Please check wether you have included tag router-outlet inside app.component.html. If there is no error and routing is working fine and only view is not rendering then it is related to view rendering place. RouterOutlet is a placeholder component that gets expanded to each route’s content.

So your app.component.html should have router-outlet tag, for eg

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
 <h1>
   Welcome to {{ title }}!
 </h1>
 <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
 <li>
   <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
 </li>
 <li>
   <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
 </li>
 <li>
   <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
 </li>
</ul>
<router-outlet></router-outlet>