Angular全栈电影应用路由配置与组件引用报错求助

问题1：Module './app.routes'声明了'routes'但未导出 #

原因 #

你的路由文件采用了传统NgModule式的路由封装，但当前项目使用独立组件模式（从NavbarComponent的standalone: true可判断）。独立组件模式下，路由需直接导出routes数组供应用注册，而非封装在AppRoutingModule中，编译器因找不到导出的routes变量报错。

修复代码 #

修改app.routes.ts，移除NgModule相关代码，直接导出路由数组：

import { Routes } from '@angular/router';
import { HomeComponent } from './components/home/home.component';
import { TrailerComponent } from './components/trailer/trailer.component';
import { ReviewComponent } from './components/review/review.component';

export const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
  },
  {
    path: 'trailer',
    component: TrailerComponent,
  },
  {
    path: 'review',
    component: ReviewComponent,
  },
];

同时确保main.ts中用独立组件方式注册路由：

// main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { provideRouter } from '@angular/router';
import { routes } from './app/app.routes';

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes)
  ]
});

问题2：组件未被识别 #

原因 #

NavbarComponent标记了standalone: true，属于独立组件，必须被使用它的组件显式导入，才能在模板中使用其选择器<app-navbar>。

修复代码 #

找到app.component.ts，在@Component的imports数组中添加NavbarComponent：

// app.component.ts
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { NavbarComponent } from './components/navbar/navbar.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, NavbarComponent], // 将Navbar组件加入导入列表
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent {
  title = 'movie-frontend';
}

若你的AppComponent未使用独立组件模式（无standalone: true），则需在AppModule的declarations数组中声明NavbarComponent，同时移除NavbarComponent的standalone: true配置，但推荐保持独立组件模式的一致性。

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