这个问题以前有人问过，但似乎没有一个答案对我有帮助。我不能在angular上路由到不同的页面，相反，它只是在我的主页末尾添加所需组件的HTML。这是我的代码：
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>
根据其他答案，问题可能与进口有关，我试图删除我在代码中使用的一些，比如切换全屏，另一种可能是我检查过的控制台错误，没有问题。有人能帮我吗？我迷路了！
感谢
App.组件被渲染，它是所有其他组件的容器。所以不要把它包括在路由中，
因此，您要做的是从App.component复制代码，并将该代码添加到一个新组件(称为home.component(
然后按如下方式配置路由。
RouterModule.forRoot([
{ path: '', component: HomeComponent},
{ path: 'admin', component: AdminComponent }
])
app.component.html
<router-outlet></router-outlet>
home.component.html
...My custom html
根据您的路线，尝试将您的routerModule更改为：
RouterModule.forRoot([
{ path: '', redirectTo: '/admin', pathMatch: 'full' },
{ path: 'admin', component: AdminComponent }
])
顺便说一句，当你创建一个forRoot路由器时，Angular会在你的应用程序(通常是app.component.html(的引导组件中寻找一个<router-outlet>选择器。没有必要使用forRoot配置指定您的应用程序组件！