Búsqueda de sitios web

typescript - Error de enrutamiento de componente independiente de Angular: No hay proveedor para ActivatedRoute

Estoy trabajando en una aplicación Angular, una aplicación de tutorial de Angular.dev que utiliza el componente independiente para la ubicación de viviendas. Mi aplicación consiste en varios componentes independientes, y estoy tratando de agregar enrutamiento para navegar al componente de inicio. Sin embargo, cuando intento navegar usando , Angular lanza el siguiente error:

ERROR Error [NullInjectorError]: R3InjectorError (Inyector de entorno) [ActivatedRoute -> ActivatedRoute]: NullInjectorError: ¡No hay proveedor para ActivatedRoute! en NullInjector.get (c:/Users/kanha/Desktop/angular/first-app/node_modules/@angular/core/fesm2022/core.mjs:5627:27) en R3Injector.get (c:/Users/kanha/Desktop/angular/first-app/node_modules/@angular/core/fesm2022/core.mjs:6070:33) en R3Injector.get (c:/Users/kanha/Desktop/angular/first-app/node_modules/@angular/core/fesm2022/core.mjs:6070:33) en ChainedInjector.get (c:/Users/kanha/Desktop/angular/first-app/node_modules/@angular/core/fesm2022/core.mjs:15353:36) en lookupTokenUsingModuleInjector (c:/Users/kanha/Desktop/angular/first-app/node_modules/@angular/core/fesm2022/core. mjs:4138:39) en getOrCreateInjectable (c:/Users/kanha/Desktop/angular/first-app/node_modules/@angular/core/fesm2022/core.mjs:4186:12) en ɵɵdirectiveInject (c:/Users/kanha/Desktop/angular/first-app/node_modules/@angular/core/fesm2022/core.mjs:11990:19) en ɵɵinject (c:/Users/kanha/Desktop/angular/first-app/node_modules/@angular/core/fesm2022/core.mjs:918:42) en Module.inject (c:/Users/kanha/Desktop/angular/first-app/node_modules/@angular/core/fesm2022/core.mjs:1002:12) en _AppComponent (c:/Users/kanha/Desktop/angular/first-app/src/app/app.component.ts:25:27) { ngTempTokenPath: null, ngTokenPath: ['ActivatedRoute', 'ActivatedRoute'] }

Aquí está la configuración de enrutamiento en mi archivo 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;

Y esta es la configuración de mi 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';
}

Este es el archivo 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));

Ya he intentado lo siguiente basado en sugerencias y documentación:

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

Sin embargo, ninguno de estos pasos resolvió el problema. La aplicación todavía lanza el NullInjectorError al intentar usar la directiva routerLink en el componente de la aplicación. Estoy usando Angular versión 17.0.10

¿Alguien ha encontrado un problema similar o puede proporcionar información sobre lo que podría estar causando este error y cómo resolverlo?

Respuesta #1

Tu proveedor debería estar en app.config.ts, no en main.ts.

Soltar main.ts como

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

Puedes proporcionar tus rutas a través de app.config.ts, ya no es un sistema modular.

Respuesta #2

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

Artículos relacionados