使用 CLI 的角度路由答案

【问题标题】：Angular Routing with CLI使用 CLI 的角度路由
【发布时间】：2018-04-20 04:52:57
【问题描述】：

角度路由不起作用。它仅在我放入 index.html 时才有效

我做的路由好不好？如果有人有与角度相关的示例，请发送邮件至 saijalshakya1@gmail.com

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';   
import { AppComponent } from './app.component';
import { OurteamComponent } from './ourteam/ourteam.component';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [
    AppComponent,
    OurteamComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app-routing.module.ts

   import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';


import { AppComponent } from './app.component';
import { OurteamComponent } from './ourteam/ourteam.component';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [
    AppComponent,
    OurteamComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

<h1>saijal shakya</h1>

<router-outlet></router-outlet>

ourteam.component.html

<p>
  ourteam works!
</p>
<router-outlet></router-outlet>

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sxc</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
</body>
</html>

【问题讨论】：

您使用的是哪个版本的 Angular？
@rohankangale 我正在使用最新的

标签： angular routing command-line-interface

【解决方案1】：

您尚未在 app.module.ts 的导入中使用 AppRoutingModule。那里肯定需要它。此外，您的 app.routing.module.ts 与不正确的 app.module.ts 相同。

使用 app.routing.module.ts 文件定义路由及其组件的映射。

【讨论】：