typescript - Eroare de rutare a componentului independent Angular: Nu există furnizor pentru ActivatedRoute

Lucrez la o aplicație Angular, aplicația tutorial Angular.dev pentru locația locuinței, utilizând componenta independentă. Aplicația mea constă din mai multe componente independente și încerc să adaug rutare pentru a naviga către componenta de acasă. Totuși, atunci când încerc să navighez folosind , Angular generează următoarea eroare:

EROARE Eroare [NullInjectorError]: R3InjectorError(Environment Injector)[ActivatedRoute -> ActivatedRoute]: NullInjectorError: Niciun furnizor pentru ActivatedRoute! la NullInjector.get (c:/Users/kanha/Desktop/angular/first-app/node_modules/@angular/core/fesm2022/core.mjs:5627:27) la R3Injector.get (c:/Users/kanha/Desktop/angular/first-app/node_modules/@angular/core/fesm2022/core.mjs:6070:33) la R3Injector.get (c:/Users/kanha/Desktop/angular/first-app/node_modules/@angular/core/fesm2022/core.mjs:6070:33) la ChainedInjector.get (c:/Users/kanha/Desktop/angular/first-app/node_modules/@angular/core/fesm2022/core.mjs:15353:36) la lookupTokenUsingModuleInjector (c:/Users/kanha/Desktop/angular/first-core/node.mjs:15353:36) mjs:4138:39) la getOrCreateInjectable (c:/Users/kanha/Desktop/angular/first-app/node_modules/@angular/core/fesm2022/core.mjs:4186:12) la ɵɵdirectiveInject (c:/Users/kanha/Desktop/angular/first-app/node_modules/@angular/core/fesm2022/core.mjs:11990:19) la ɵɵinject (c:/Users/kanha/Desktop/angular/first-app/node_modules/@angular/core/fesm2022/core.mjs:918:42) la Module.inject (c:/Users/kanha/Desktop/angular/first-app/node_modules/@angular/core/fesm2022/core.mjs:1002:12) la _AppComponent (c:/Users/kanha/Desktop/angular/first-app/src/app/app. ngTokenPath: ['ActivatedRoute', 'ActivatedRoute'] }

Iată configurația rutării în fișierul meu 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;

Și aceasta este configurarea mea 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';
}

Acesta este fișierul main.ts

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

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

Am încercat deja următoarele pe baza sugestiilor și a documentației:

• Am încercat să import RouterModule.forRoot(routeConfig) în main.ts astfel

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

• Verificarea dublă a referințelor de cale și componentă în routeConfig
• Căutarea oricăror furnizori lipsă sau plasați greșit pentru ActivatedRoute, deși nu este utilizat în mod explicit în componenta aplicației.

Totuși, niciuna dintre aceste măsuri nu a rezolvat problema. Aplicația continuă să arunce NullInjectorError atunci când încearcă să folosească directiva routerLink în componenta aplicației. Folosesc Angular versiunea 17.0.10

A întâmpinat cineva o problemă similară sau poate oferi informații despre ce ar putea cauza această eroare și cum să o rezolve?

Răspuns #1

Furnizorul tău ar trebui să fie în app.config.ts, nu în main.ts.

Renunță la main.ts ca

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, appConfig)
  .catch((err) => console.error(err));

app.config.ts

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routeConfig } from './app.routes';
import { provideClientHydration } from '@angular/platform-browser';

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routeConfig), provideClientHydration()]
};

app.routes.ts

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

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

Puteți furniza rutele dvs. prin app.config.ts, nu mai este un sistem modular.

Răspunsul #2

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