라우터의 공급자가 없습니까?

라우터의 공급자가 없습니까?

다음 오류가 발생합니다.

예외: ./AppComponent 클래스 AppComponent에서 오류가 발생했습니다. 인라인 템플릿: 0:0 원인: 라우터에 대한 공급자 없음!

이것은 나의 앱 구성요소:

import {Component} from '@angular/core';
import {LoginComponent} from './login/components/login.component';
@Component({
    selector: 'my-app',
    template: '<login></login>',

})
export class AppComponent {

}

앱 모듈에서 해봤습니다.

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

  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    LoginModule,
    RouterModule
  ],
  bootstrap: [AppComponent, RouterModule]

하지만 이 오류가 발생합니다.

오류: 오류:라우터 모듈에서 지시 주석을 찾을 수 없습니다.

몇 가지 예시를 찾았는데 라우터를 사용하지 않으며 해당 폴더가 없습니다.그거 필요해요, 뭐요?좋은 방법이 있습니까?

업데이트:

이것은 내 app.module:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { LoginModule } from './login/login.module';
import { RouterModule } from '@angular/router';
//import 'rxjs/Rx';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    LoginModule,
    RouterModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.구성요소:

import {Component} from '@angular/core';
import {LoginComponent} from './login/components/login.component';
@Component({
    selector: 'my-app',
    template: '<login></login>',

})
export class AppComponent {

}

그리고 login.component:

import {Component, EventEmitter, Input, OnChanges} from '@angular/core';
import {Observable} from 'rxjs/Rx';
import { LoginService } from '../services/login.service';
import { Login } from '../model/login'
import {Router} from '@angular/router';
@Component({
    selector: 'login',
    templateUrl: 'login-form',

})
export class LoginComponent {
  // Constructor with injected service
      constructor(
          private loginService: LoginService,
          private router: Router
          ){}

      submitLogin(values){

          // Variable to hold a reference of addComment/updateComment
             let loginOperation:Observable<any>;
             loginOperation = this.loginService.Login(values);
             loginOperation.subscribe(
                function(response) { console.log("Success Response" + response)},
                function(error) { console.log("Error happened" + error)},
                function() {
                   console.log("the subscription is completed");
                     this.router.navigate(['/About']);

                 }
            );

           }
}

아마 문제는 다음과 같습니다.

 this.router.navigate(['/home']);

이것은 나의 로그인 모듈:

import { NgModule }       from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';
import { FormsModule }    from '@angular/forms';
import { HttpModule, JsonpModule } from '@angular/http';
import { LoginComponent } from './components/login.component';
import { RouterModule } from '@angular/router';

import { LoginService } from './services/login.service';


@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
     HttpModule,
    JsonpModule,
    RouterModule  


  ],
  declarations: [
    LoginComponent
  ],

  providers: [
      LoginService
  ],

  exports:[
    LoginComponent
  ]

})
export class LoginModule {
}

이 모듈을 사용하십시오.

RouterModule.forRoot(
  [
    { path: "", component: LoginComponent}
  ]
)

이제 당신의 것을 대체하세요.<login></login>와 함께<router-outlet></router-outlet>그것으로 끝입니다

부품 자동 테스트를 개발할 때도 이 오류가 발생했습니다.이런 맥락에서 다음과 같은 가져오기를 수행해야 합니다.

import { RouterTestingModule } from "@angular/router/testing";

const testBedConfiguration = {
  imports: [SharedModule,
    BrowserAnimationsModule,
    RouterTestingModule.withRoutes([]),
  ],

Babar Bilal의 대답은 초기 Angular 2 alpha/beta 릴리스에서 완벽하게 작동했을 가능성이 높습니다.그러나 Angular release v4+로 이 문제를 해결하는 사람은 누구나 대신 다음과 같은 답변 변경을 시도할 수 있습니다(단일 경로를 필요한 배열로 래핑).

RouterModule.forRoot([{ path: "", component: LoginComponent}])

이 발판에서는 아무것도 작동하지 않습니다."forRoot"은 도움이 되지 않습니다.

죄송합니다. 해결했습니다.이 "forRoot" 라우터 설정 루틴에 대해 올바른 "routes"(경로)를 설정하여 작동할 수 있었습니다.

    import {RouterModule, Routes} from '@angular/router';    
    import {AppComponent} from './app.component';
    
    const appRoutes: Routes = [
      {path: 'UI/part1/Details', component: DetailsComponent}
    ];
    
    @NgModule({
      declarations: [
        AppComponent,
        DetailsComponent
      ],
      imports: [
        BrowserModule,
        HttpClientModule,
        RouterModule.forRoot(appRoutes)
      ],
      providers: [DetailsService],
      bootstrap: [AppComponent]
    })

또한 도움이 될 수도 있습니다(이를 실현하기 위해 시간을 소비) 옵션 경로 부분:

    const appRoutes: Routes = [
       {path: 'UI/part1/Details', component: DetailsComponent},
       {path: ':project/UI/part1/Details', component: DetailsComponent}
    ];

두번째 규칙은 다음과 같이 URL을 열도록 허용합니다.
hostname/test/UI/part1/Details?id=666
그리고.
hostname/UI/part1/Details?id=666

2012년부터 프론트엔드 개발자로 근무하고 있지만 angular2와 같이 지나치게 복잡한 문제를 해결한 적은 없습니다(엔터프라이즈급 ExtJS 경력 3년).

제가 실수를 했습니다.

라우터에 대한 공급자

당신이 길을 찾으려 할 때 발생합니다.any service.ts

this.router.navigate(['/home']);서비스의 코드들이 그 오류를 야기합니다.

구성 요소에서 탐색 작업을 처리해야 합니다.예를 들어: 에login.component

login().subscribe(
        (res) => this.router.navigate(['/home']),
        (error: any) => this.handleError(error));

신입일 때 짜증나는 오류 발생 :)

별도의 모듈을 생성한 경우(예:AppRoutingModule라우팅 명령을 포함할 경우 다음과 같은 오류가 발생할 수 있습니다.

Error: StaticInjectorError(AppModule)[RouterLinkWithHref -> Router]: 
StaticInjectorError(Platform: core)[RouterLinkWithHref -> Router]: 
NullInjectorError: No provider for Router!

메인으로 가져오는 것을 잊으셨을 수 있습니다.AppModule다음과 같이

@NgModule({
  imports:      [ BrowserModule, FormsModule, RouterModule, AppRoutingModule ],
  declarations: [ AppComponent, Page1Component, Page2Component ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

저는.routerLink="."오류를 일으킨 HTML 태그 중 하나에 속성을 지정합니다.

아래와 같이 Import 해주시기 바랍니다.

'@angular/Router'에서 {Router}을(를) 가져옵니다.

수행 중인 오류가 -> '@angular/router'에서 {Router}을(를) 가져옵니다.

언급URL : https://stackoverflow.com/questions/42829796/no-provider-for-router