Angular 独立组件路由错误：没有ActivatedRoute 的提供者

Question

我正在使用独立组件开发 Angular 应用程序Angular.dev 教程应用程序外壳位置。我的应用程序由多个独立组件组成，我正在尝试添加路由以导航到主页组件。但是，当我尝试使用 进行导航时，Angular 会抛出以下错误：

错误错误[NullInjectorError]：R3InjectorError（环境注入器）[ActivatedRoute -> ActivatedRoute]： NullInjectorError：没有ActivatedRoute的提供者！ 在 NullInjector.get (c:/Users/kanha/Desktop/angular/first-app/node_modules/@angular/core/fesm2022/core.mjs:5627:27) 在 R3Injector.get (c:/Users/kanha/Desktop/angular/first-app/node_modules/@angular/core/fesm2022/core.mjs:6070:33) 在 R3Injector.get (c:/Users/kanha/Desktop/angular/first-app/node_modules/@angular/core/fesm2022/core.mjs:6070:33) 在 ChainedInjector.get （c：/Users/kanha/Desktop/angular/first-app/node_modules/@angular/core/fesm2022/core.mjs:15353:36） 在lookupTokenUsingModuleInjector（c：/Users/kanha/Desktop/angular/first-app/node_modules/@angular/core/fesm2022/core.mjs:4138:39） 在 getOrCreateInjectable （c：/Users/kanha/Desktop/angular/first-app/node_modules/@angular/core/fesm2022/core.mjs:4186:12） 在 ɵɵdirectiveInject （c：/Users/kanha/Desktop/angular/first-app/node_modules/@angular/core/fesm2022/core.mjs:11990:19） 在ɵɵinject（c：/Users/kanha/Desktop/angular/first-app/node_modules/@angular/core/fesm2022/core.mjs:918:42） 在 Module.inject （c：/Users/kanha/Desktop/angular/first-app/node_modules/@angular/core/fesm2022/core.mjs:1002:12） 在 _AppComponent (c:/Users/kanha/Desktop/angular/first-app/src/app/app.component.ts:25:27) { ngTempTokenPath：空， ngTokenPath: [ 'ActivatedRoute', 'ActivatedRoute' ] }

这是我的routes.ts 文件中的路由配置：

import {Routes} from '@angular/router';
import {HomeComponent} from './home/home.component';
import {DetailsComponent} from './details/details.component';

const routeConfig: Routes = [
    {
        path: '',
        component: HomeComponent,
        title: 'Home page',
    },
    {
        path: 'details/:id',
        component: DetailsComponent,
        title: 'Details Page',
    },
];

export default routeConfig;

这是我的 AppComponent 设置：

import {Component} from '@angular/core';
import { HomeComponent } from './home/home.component';
import { RouterLink, RouterOutlet} from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [HomeComponent, RouterLink, RouterOutlet],
  template: `
    <main>
      <a [routerLink]="['/']">
        <header class="brand-name">
          <img class="brand-logo" src="/assets/logo.svg" alt="logo" aria-hidden="true" />
        </header>
      </a>
      <section class="content">
        <router-outlet></router-outlet>
      </section>
    </main>
  `,
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title = 'homes';
}

我已经根据建议和文档尝试了以下操作：

• 尝试像这样在 main.ts 中导入 RouterModule.forRoot(routeConfig)

bootstrapApplication(AppComponent, {
  providers: [
                provideProtractorTestingSupport(),
                provideRouter(routeConfig),
                importProvidersFrom(RouterModule.forRoot(routeConfig))
             ]
}).catch((err) => console.error(err));

• 仔细检查routeConfig中的路径和组件引用
• 搜索任何丢失或丢失的ActivatedRoute提供程序，尽管它没有在应用程序组件中明确使用。

但是，这些步骤都没有解决问题。当尝试在应用程序组件中使用 routerLink 指令时，应用程序仍然会抛出 NullInjectorError 。我正在使用 Angular 版本 17.0.10

有人遇到过类似的问题，或者可以深入了解可能导致此错误的原因以及如何解决它吗？

Answer 1

bootstrapApplication(AppComponent, {
providers: [
                provideProtractorTestingSupport(),
                provideRouter(routeConfig),
             ]
}).catch((err) => console.error(err));