ウェブサイト検索

typescript - Angular スタンドアロンコンポーネントのルーティングエラー: ActivatedRoute のプロバイダーがありません

私は、スタンドアロンコンポーネントを利用した Angular アプリケーション Angular.dev チュートリアルアプリのハウジングロケーションに取り組んでいます。私のアプリケーションはいくつかのスタンドアロンコンポーネントで構成されており、ホームコンポーネントにナビゲートするためにルーティングを追加しようとしています。しかし、<a [routerLink]="['/']"> を使用してナビゲートしようとすると、Angular は次のエラーを投げます:

エラー エラー [NullInjectorError]: R3InjectorError(Environment Injector)[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. Miju:4138:39) at Getok Lita Injectable (Issue:/Users/Kanha/Desktop/Unusual/First-Up/Modules/@アンギュラー/Core/Fesum2022/Core. Mujis:4186:12) at ɵɵDirect Injection (問題: /Users/Kanha/Desktop/Unusual/First-Up/Modules/@アンギュラー/Core/Fest2022/Core. Mujis:11990:19) at ɵɵ インジェクション (問題:/Users/Kanha/Desktop/Uncorrect/First-Up/Do_Modules/@アンギュラー/ Core/Fesum 2022/Core. Muzis:918:42) モジュールで。 Inject (Issue:/Users/Kanha/Desktop/Angular/First-Up/Modules/@アンギュラー/Core/Fesum2022/Core.Muzis:1002:12) at _Ap Component (Issue:/Users/kanha/desktop/unusual/first-up/surk/up/up.Component.Tsu:25:27) { Gutemptkenpas: Null, Gutkenpas: [&Apost;アクティブ化されたルート&Apost;, &Apost;アクティブ化されたルート&Apost;] }

こちらは私の 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 ファイルです

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));

私はすでに、提案やドキュメントに基づいて次のことを試しました：

  • このようにRouterModule.forRoot(routeConfig)main.tsをインポートしてみました
bootstrapApplication(AppComponent, {
  providers: [
                provideProtractorTestingSupport(),
                provideRouter(routeConfig),
                importProvidersFrom(RouterModule.forRoot(routeConfig))
             ]
}).catch((err) => console.error(err));
  • routeConfigでパスとコンポーネントの参照を二重確認する
  • アプリコンポーネントで明示的に使用されていないにもかかわらず、ActivatedRouteの紛失または不足しているプロバイダーを探しています。

しかし、これらの手順のいずれも問題を解決しませんでした。アプリケーションは依然として、アプリコンポーネントで routerLink ディレクティブを使用しようとすると NullInjectorError をスローします。私は Angular バージョン 17.0.10 を使用しています

誰か同様の問題に遭遇したことがある人、またはこのエラーの原因と解決方法について洞察を提供できる人はいますか？

回答 #1

あなたのプロバイダーはapp.config.tsにいるべきで、main.tsには行いません。

main.ts をドロップする

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

ルートは app.config.ts を通じて提供できます。もうモジュラーシステムではありません。

回答 #2

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

関連記事