Menu
This question has been asked before, but none of the answers seems to help me. I can't route to different pages on angular, instead, it just appends at the end of my homepage the HTML of the desired component. Here is my code:
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { ToggleFullscreenDirectiveDirective } from './toggle-fullscreen-directive.directive';
import { HttpClientModule } from '@angular/common/http';
import { AnnouncementsComponent } from './announcements/announcements.component';
import { AdminComponent } from './admin/admin.component';
import { RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { ToggleFullscreenDirectiveDirective } from './toggle-fullscreen-directive.directive';
import { HttpClientModule } from '@angular/common/http';
import { AnnouncementsComponent } from './announcements/announcements.component';
import { AdminComponent } from './admin/admin.component';
import { RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
@NgModule({
declarations: [
AppComponent,
ToggleFullscreenDirectiveDirective,
AnnouncementsComponent,
AdminComponent
],
imports: [
BrowserModule,
HttpClientModule,
RouterModule.forRoot([
{ path: '', component: AppComponent },
{ path: 'admin', component: AdminComponent }
])
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.html
...My custom html
<router-outlet></router-outlet>
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Angular Bootstrap Demo</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<app-root>Loading...</app-root>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
Based on other answers the problem might be with imports, I tried to remove some that I used on the code, like the toggle fullscreen, another possibility is that there might be a console error which I checked and there is no problem. can anyone help me? I am lost!
Thanks
661
App.component is rendered and it's the container for all other components. So don't include it in routing,
So what you have to do is copy your code from App.component and add that code to a new component (called home.component)
Then configure routing as follows.
RouterModule.forRoot([
{ path: '', component: HomeComponent},
{ path: 'admin', component: AdminComponent }
])
app.component.html
<router-outlet></router-outlet>
home.component.html
...My custom html
Based on your routes, try to change your routerModule to:
RouterModule.forRoot([
{ path: '', redirectTo: '/admin', pathMatch: 'full' },
{ path: 'admin', component: AdminComponent }
])
By the way, when you create a forRoot router, Angular looks for a <router-outlet> selector in your bootstrap component from your application (app.component.html usually). There's no need to specify your app.component with forRoot configuration!
42
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
