BinaryDevelop
  1. ホーム
  2. javascript

[解決済み】Angular 6 エラー "NullInjectorError: No provider for Router!" というエラーが発生しました。

2022-02-10 15:04:01

質問

現在、あるプロジェクトに取り組んでいます。ユーザーがangularフォームに入力し、それをバックエンドのルートに送ってデータを処理する必要があります。バックエンドはASP.NETで、私はすでに機能しているHTMLの機能的なフォームを持っています。 

<body>
<h2 style="text-align:center">Push notification test</h2>
<form style="align-content:center" action="SendPushNotification" method="post">
    <div>
        <fieldset>
            <legend> Informations </legend>
            <label> Notification name : </label>
            <input name="notificationName" id="notificationName" type="text" value="Bonjour" />
        </fieldset>
        <br />
        <fieldset>
            <label> Server Key : </label>
            <input name="serverKey" id="serverKey" type="text" value="AAAAuTv1XVQ:APA91bHsgOmK-quki_rRehRhON9c_y9INocubgru6_jPePiE_Zt5iVXfJ-XD43RubfIY5WEoIpFEyziByfeNRsoIlpeNi693bGZYfjjb7ULDx23sRzHQcYLCgl7y3vn-K9X8hrmQhw1oY6lSTml2aqzoi8GGBIeZYA" />
        </fieldset>
        <br />
        <fieldset>
            <label> To mobile user : </label>
            <select name="selectMobile" id="selectMobile" style="width:400px" name="mobileUser">
                <option>Select Mobile User</option>
            </select>
        </fieldset>
        <br />
        <fieldset>
            <label> To topic : </label>
            <input name="topicName" id="topicName" type="text" value="news" />
        </fieldset>
        <br />
        <fieldset>
            <label> Message : </label>
            <textarea name="notificationMessage" id="notificationMessage" cols="40" rows="5">Comment tu vas toi ?</textarea>
        </fieldset>
        <br />
        <input type="submit" value="Send Notification" />
    </div>
</form>

HTMLレンダリング

そこで、Angular 6で同じことをしようとしているのですが、この結果、ルート "SendNotification" を私の "Submit" ボタンに割り当てようとすると、次のエラーが表示されます。

Angular レンダリング + エラー

notification-form.component.html 

<button [routerLink]="['SendNotification']" type="submit" class="btn btn-success" [disabled]="!notificationForm.form.valid">Submit</button>

を追加すると、すぐにエラーが発生します。 [routerLink] またはプライベートコンストラクタを追加します。 

 constructor(private router: Router) {}

を私の notification-form.component.ts . を追加するなどの解決策をすでに試しています。 HttpClientModule に、私の app.module.ts が、何も動作しない。

何か間違いがあるのでしょうか？

お忙しい中、ありがとうございました。

UPDATE

app.module.ts 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'; // <-- NgModel lives here
import { RouterModule } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';
import { NotificationFormComponent } from './notification-form/notification-form.component';

@NgModule({
  imports: [
BrowserModule,
HttpClientModule,
FormsModule,
RouterModule
],  
declarations: [
AppComponent,
NotificationFormComponent
],
providers: [],
bootstrap: [AppComponent]
})

export class AppModule { }

解決方法は？

最初のインポート RouteModule で app.module.ts 

import { RouterModule, Routes } from '@angular/router';

そして、以下のように使用します。(インポートするのは RouterModule を追加する必要があります。 forRoot([]) もあります)。 

imports: [
    RouterModule.forRoot([])
    // other imports here
  ]

ルートがある場合は、以下のように使用します。このサンプルコードは アンギュラーDOC 

const appRoutes: Routes = [
  { path: 'crisis-center', component: CrisisListComponent },
  { path: 'hero/:id',      component: HeroDetailComponent },
  {
    path: 'heroes',
    component: HeroListComponent,
    data: { title: 'Heroes List' }
  },
  { path: '',
    redirectTo: '/heroes',
    pathMatch: 'full'
  },
  { path: '**', component: PageNotFoundComponent }
];

@NgModule({
  imports: [
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: true } // <-- debugging purposes only
    )
    // other imports here
  ],
  ...
})
export class AppModule { }

そして、メインのComponent( app.component.html を追加します。 <router-outlet></router-outlet>

これがあなたの助けになることを願っています。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します