typescript - Kesalahan Routing Komponen Mandiri Angular: Tidak Ada Penyedia untuk ActivatedRoute

Saya sedang mengerjakan aplikasi AngularAngular.dev tutorial app housing location yang menggunakan komponen mandiri. Aplikasi saya terdiri dari beberapa komponen mandiri, dan saya mencoba menambahkan routing untuk menavigasi ke komponen beranda. Namun, ketika saya mencoba menavigasi menggunakan , Angular mengeluarkan kesalahan berikut:

Kesalahan ERROR [NullInjectorError]: R3InjectorError(Injektor Lingkungan)[ActivatedRoute -> ActivatedRoute]: NullInjectorError: Tidak ada penyedia untuk ActivatedRoute! di NullInjector.get (c:/Users/kanha/Desktop/angular/first-app/node_modules/@angular/core/fesm2022/core.mjs:5627:27) di R3Injector.get (c:/Users/kanha/Desktop/angular/first-app/node_modules/@angular/core/fesm2022/core.mjs:6070:33) di R3Injector.get (c:/Users/kanha/Desktop/angular/first-app/node_modules/@angular/core/fesm2022/core.mjs:6070:33) di ChainedInjector.get (c:/Users/kanha/Desktop/angular/first-app/node_modules/@angular/core/fesm2022/core.mjs:15353:36) di lookupTokenUsingModuleInjector (c:/Users/kanha/Desktop/angular/first-app/node_modules/@angular/core/fesm2022/core. mjs:4138:39) di getOrCreateInjectable (c:/Users/kanha/Desktop/angular/first-app/node_modules/@angular/core/fesm2022/core.mjs:4186:12) di ɵɵdirectiveInject (c:/Users/kanha/Desktop/angular/first-app/node_modules/@angular/core/fesm2022/core.mjs:11990:19) di ɵɵinject (c:/Users/kanha/Desktop/angular/first-app/node_modules/@angular/core/fesm2022/core.mjs:918:42) di Module.inject (c:/Users/kanha/Desktop/angular/first-app/node_modules/@angular/core/fesm2022/core.mjs:1002:12) di _AppComponent (c:/Users/kanha/Desktop/angular/first-app/src/app/app.component.ts:25:27) { ngTempTokenPath: null, ngTokenPath: ['ActivatedRoute', 'ActivatedRoute'] }

Berikut adalah konfigurasi routing di file routes.ts saya:

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;

Dan ini adalah pengaturan AppComponent saya:

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';
}

Ini adalah file 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));

Saya sudah mencoba hal-hal berikut berdasarkan saran dan dokumentasi:

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

Namun, tidak ada satu pun langkah ini yang menyelesaikan masalah. Aplikasi tetap menampilkan NullInjectorError saat mencoba menggunakan direktif routerLink di komponen app. Saya menggunakan Angular versi 17.0.10

Apakah ada yang pernah mengalami masalah serupa atau dapat memberikan wawasan tentang apa yang mungkin menyebabkan kesalahan ini dan bagaimana cara mengatasinya?

Jawaban #1

Penyedia Anda seharusnya ada di app.config.ts, bukan di main.ts.

Hapus main.ts sebagai

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',
    },
];

Anda dapat menyediakan rute Anda melalui app.config.ts, sistem ini tidak lagi bersifat modular.

Jawaban #2

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

Artikel terkait