Angular 基于CLI的角度路由_Angular_Routing_Command Line Interface

Angular 基于CLI的角度路由

angular routing

Angular 基于CLI的角度路由,angular,routing,command-line-interface,Angular,Routing,Command Line Interface,角度布线不起作用。它只在我输入index.html时起作用我所做的路由是否正常？如果有人有与angular相关的示例，请发邮件至saijalshakya1@gmail.com 应用程序模块.ts import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'

角度布线不起作用。它只在我输入index.html时起作用

我所做的路由是否正常？如果有人有与angular相关的示例，请发邮件至saijalshakya1@gmail.com

应用程序模块.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 { }

   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 { }

应用程序路由.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 { }

   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>

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

<!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>

saijal shakya

ourteam.component.html

<h1>saijal shakya</h1>

<router-outlet></router-outlet>

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

<!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>


我们的团队工作！

index.html

<h1>saijal shakya</h1>

<router-outlet></router-outlet>

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

<!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>

Sxc

您尚未在app.module.ts的导入中使用AppRoutingModule。这是必须的。此外，您的app.routing.module.ts与app.module.ts相同，但不正确

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

您使用的是哪个版本的angular？@rohankangale我使用的是最新版本的angular