我目前正在为我的API做一个前端，现在是时候做另一个组件了。我尝试了所有的方法，甚至创建了一个app-routing.module.ts，但是它只显示我的app.component.html！！我不明白为什么？？我的app-routing.module.ts：

import { AppComponent } from './app.component';
import { clientprodComponent } from './clientproduct/clientprod.component';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const appTtitle = document.title;

const routes: Routes = [
 {path:"", component: AppComponent},
 {path:"clientprod", component: clientprodComponent},

];

@NgModule({
 imports: [RouterModule.forRoot(routes)],
 exports: [RouterModule]
})
export class AppRoutingModule { }
export const routingComponents = [AppComponent, clientprodComponent]

我的客户产品组件ts：

import { CloudProductService } from './cloudproduct.service';
import { CloudProduct } from './cloudproduct';
import { Component, OnInit } from '@angular/core';
import { HttpErrorResponse } from '@angular/common/http';
import { NgForm } from '@angular/forms';
import * as $ from 'jquery';

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

export class clientprodComponent implements OnInit {
 public cloudProducts: CloudProduct[] | null;
 public editProduct: CloudProduct | null;
 public deleteProduct: CloudProduct | null;
 constructor(private cloudProductService: CloudProductService){}

 ngOnInit(){
   this.getCloudProducts();
 }

   public getCloudProducts():void{
     this.cloudProductService.getCloudProducts().subscribe(
       (response: CloudProduct[]) =>{
         this.cloudProducts = response;
       },
       (error: HttpErrorResponse) => {
         alert(error.message);
       }
     );
 }

 public onOpenModal(cloudProduct: CloudProduct | null, mode: string): void {
   const container = document.getElementById('main-container');
   const button = document.createElement('button');
   button.type = 'button';
   button.style.display = 'none';
   button.setAttribute('data-toggle', 'modal');
   if (mode === 'add') {
     button.setAttribute('data-target', '#addProductModal');
   }
   if (mode === 'edit') {
     this.editProduct = cloudProduct;
     button.setAttribute('data-target', '#updateProductModal');
   }
   if (mode === 'delete') {
     this.deleteProduct = cloudProduct;
     button.setAttribute('data-target', '#deleteProductModal');
   }
   container!.appendChild(button);
   button.click();
 }

}

我的客户产品组件质量标准：

import { ComponentFixture, TestBed } from '@angular/core/testing';

import { clientprodComponent } from './clientprod.component';

describe('clientprodComponent', () => {
 let component: clientprodComponent;
 let fixture: ComponentFixture<clientprodComponent>;

 beforeEach(async () => {
   await TestBed.configureTestingModule({
     declarations: [ clientprodComponent ]
   })
   .compileComponents();

   fixture = TestBed.createComponent(clientprodComponent);
   component = fixture.componentInstance;
   fixture.detectChanges();
 });

 it('should create', () => {
   expect(component).toBeTruthy();
 });
});

我不明白，我也把它导入到我的app. module. ts中了...为什么它只显示app.component.html，而不管url是什么？