Angular无法打开player-drag-drop组件页面的问题求助

你的核心问题有两个：

• app.module.ts中重复定义了@NgModule装饰器，Angular只会应用最后一个，因此第一个模块配置里的bootstrap: [PlayerDragDropComponent]完全无效，实际启动的是AppComponent。
• 目前没有任何配置让PlayerDragDropComponent在根路径http://localhost:4200/上渲染。

第一步：修复app.module.ts的重复模块定义 #

首先合并两个@NgModule，把DragDropModule加入到正确的模块导入中，修正后的代码如下：

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { PlayerDragDropComponent } from './player-drag-drop/player-drag-drop.component';
import { DragDropModule } from '@angular/cdk/drag-drop';

@NgModule({
  declarations: [
    AppComponent,
    PlayerDragDropComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    DragDropModule
  ],
  providers: [
    provideClientHydration()
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

方案一：直接将PlayerDragDropComponent设为启动组件 #

若希望应用启动后直接显示该组件，修改bootstrap数组：

bootstrap: [PlayerDragDropComponent]

重启应用后，http://localhost:4200/就会直接渲染player-drag-drop.component.html的内容。

方案二：通过路由配置根路径指向该组件（推荐） #

1. 打开app-routing.module.ts，添加路由规则：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { PlayerDragDropComponent } from './player-drag-drop/player-drag-drop.component';

const routes: Routes = [
  { path: '', component: PlayerDragDropComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

2. 打开app.component.html，替换默认内容为路由出口：

<router-outlet></router-outlet>

启动应用后，根路径会通过路由渲染PlayerDragDropComponent。

方案三：在AppComponent中嵌入PlayerDragDropComponent #

若需保留AppComponent作为启动组件，同时显示拖拽组件，直接修改app.component.html：

<app-player-drag-drop></app-player-drag-drop>

替换掉原来的"Congratulations! Your app is running"内容即可。

内容的提问来源于stack exchange，提问作者TheMusicNaggets