Angular 7, 명명 된 라우터 콘센트가 지연로드 된 모듈 내에서 작동하지 않습니다.

안토니 붐

그래서 저는 유명한 각도 라우팅 문제에 직면했습니다 . "지연로드 모듈이있는 콘센트" . 이 문제는 종결 된 것으로 보이며이 사람은 내가 따라온 작업 솔루션을 제공했습니다 . 그러나 여전히 오류가 발생하고이 문제의 본질을 이해할 수 없습니다.

오류 : 경로와 일치 할 수 없습니다. URL 세그먼트 :

다른 구성 요소에 대한 리디렉션 경로가 다른 pathMatch : 'full'을 사용하려고 시도했지만 결국 항상 동일한 오류가 발생합니다.

나는 이미 몇 시간 동안 갇혀 있기 때문에 여기서 질문하기로 결정했습니다. 내 문제는 어디에 있고 무엇을 놓치고 있습니까?

내 설정

app.routing.ts :

 const routes: Routes = [
      {
        path: '',
        loadChildren: 'app/home/home.module#HomeModule',
      },
      {
        path: 'admin',
        loadChildren: 'app/admin/admin.module#AdminModule',
      },
      {
        path: 'data',
        loadChildren: 'app/data/data.module#DataModule',
      },
      {
        path: '**',
        redirectTo: ''
      }
    ];

app.component.html

<app-header></app-header>
<router-outlet></router-outlet>

data.routing-module.ts

    const routes: Routes = [
  {
    path: 'summary',
    component: SummaryComponent,
    canActivate: [AuthGuard],
  },
  {
    path: 'management/:id',
    component: DataComponent,
    canActivate: [AuthGuard],
    children: [
      {
        path: 'activities',
        component: ActivitiesComponent,
        outlet: 'activities',
      },
      {
        path: 'researches',
        component: ResearchesComponent,
        outlet: 'researches',
      }
    ]
  },
  {
    path: 'review/:id',
    component: InfoComponent,
    canActivate: [AuthGuard],
  },
];

data.component.html

<mat-drawer-container class="docs-viewer-container">

  <mat-drawer position='start' [mode]='mode'>
    <router-outlet name="activities"></router-outlet>
  </mat-drawer>

  <mat-drawer position='end' [mode]='mode'>
    <router-outlet name="researches"></router-outlet>
  </mat-drawer>

  <mat-drawer-content>
    ... 
     // content
    ...
  </mat-drawer-content>

</mat-drawer-container>

따라서 데이터 모듈의 랜딩 페이지는 사용자가 URL 경로를 탐색하기 위해 링크를 클릭 한 후 요약 구성 요소 'path/data/summary?params'입니다. Summary.component에는 탐색 기능이 있습니다.

  onActivitySelection(event) {

    this.queryParams.offset = 0;
    this.queryParams.limit = 25

    this.router.navigate([{
        outlets: {
          'activities': '/data/management/' + event.id + '/activities'
        }
      }],
      {
        queryParams: this.queryParams
      })
  }

보시다시피 리디렉션 경로는 '/ data / management / : id / activities'여야합니다. 그러나 오류는이 경로를 찾을 수 없다고 말합니다.

누구든지 내 문제로 나를 도울 수 있습니까?

셰리 웡

색인 구성 요소에 모듈의 경로를 포함 해보십시오. 앱 모듈에 대한 라우터 콘센트가 있지만 그 아래 수준은 없습니다.

데이터 모듈의 경로 :

{
    path: '', component: DataIndexComponent, canActivate: [AuthGuard],
    children: [
      {
       path: 'summary',
       component: SummaryComponent
      },
      ...[restOfRoutes]
      ]
}

DataIndexComponent 내에서 <router-outlet></router-outlet>.

다른 참고로, 동일한 인증 가드를 사용하는 경우 모듈의 인덱스 수준에 배치 할 수 있습니다.

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

각도 라우터 : 명명 된 아웃렛이 상대 경로 나 지연로드 된 모듈에서 작동하지 않는 것 같습니다.

분류에서Dev

Angular2 명명 된 라우터가 작동하지 않음

분류에서Dev

Angular 11은 명명 된 콘센트로 라우팅 할 수 없습니다.

분류에서Dev

Angular 2의 명명 된 라우터 콘센트를 찾을 수 없습니까?

분류에서Dev

기능 모듈의 라우터 모듈에 정의 된 구성 요소가 자체 라우터 콘센트에로드됩니까?

분류에서Dev

PHP exec 명령이 변수가 포함 된 터미널 명령에서 작동하지 않습니다.

분류에서Dev

ui 라우터는 명명 된 ui-view에 콘텐츠를 넣지 않습니다.

분류에서Dev

템플릿이 명명 된 콘센트로 렌더링되지 않습니다.

분류에서Dev

템플릿이 명명 된 콘센트로 렌더링되지 않습니다.

분류에서Dev

HDMI 포트에 연결된 모니터가 작동하지 않습니다.

분류에서Dev

서명 된 사용자 지정 커널에서 서명 된 모듈을로드 할 수 없습니다.

분류에서Dev

갱신 된 코드 서명 인증서가 작동하지 않습니다.

분류에서Dev

유추 된 네임 스페이스의 클래스는 작동하지만 명시 적으로 명명 된 경우에는 작동하지 않습니다.

분류에서Dev

Laravel 명명 된 경로는 wampserver에서 작동하지 않습니다.

분류에서Dev

준비된 명령문 executeUpdate가 업데이트 명령문에서 작동하지 않습니다.

분류에서Dev

Angular4 Material MdTable이 라우터 콘센트에서 작동하지 않습니다.

분류에서Dev

Angular RouterTestingModule 테스트가 라우터 콘센트에서 구성 요소를 렌더링하지 않습니다.

분류에서Dev

이 컴파일 단위가 명명 된 모듈에 연결되어 있기 때문에 명명 된 패키지 일식을 선언해야합니다

분류에서Dev

Rails (6.0.3.4) Webpacker (5.2.1) 패키지 가져 오기 오류 :`비 EcmaScript 모듈에서 명명 된 내보내기를 가져올 수 없습니다 .`

분류에서Dev

명명 된 함수가있는 window.removeEventListener가 작동하지 않습니다.

분류에서Dev

Angular의 지연로드 된 모듈에 중첩 된 자식

분류에서Dev

Apache POI MissingCellPolicy가 문서에 설명 된대로 실제로 작동하지 않습니다.

분류에서Dev

jQuery가 ajaxally로드 된 데이터에서 작동하지 않습니다.

분류에서Dev

익명 함수를 명명 된 함수로 변환하는 JQuery가 제대로 작동하지 않습니다.

분류에서Dev

부스트에서 작동하지 않는 명명 된 매개 변수 전달

분류에서Dev

서버 측 모듈화 된 코드의 actionButton이 작동하지 않습니다.

분류에서Dev

raspbian jessie에 설치된 Python 모듈이 Python 스크립트에서 작동하지 않습니다.

분류에서Dev

자체 서명 된 인증서 우회가 작동하지 않음

분류에서Dev

pfsense 라우터에 연결된 라우터 전용 설정의 Fritzbox 모뎀 / 라우터가 작동하지만 DHCP 테이블에 표시되지 않습니다.

Related 관련 기사

  1. 1

    각도 라우터 : 명명 된 아웃렛이 상대 경로 나 지연로드 된 모듈에서 작동하지 않는 것 같습니다.

  2. 2

    Angular2 명명 된 라우터가 작동하지 않음

  3. 3

    Angular 11은 명명 된 콘센트로 라우팅 할 수 없습니다.

  4. 4

    Angular 2의 명명 된 라우터 콘센트를 찾을 수 없습니까?

  5. 5

    기능 모듈의 라우터 모듈에 정의 된 구성 요소가 자체 라우터 콘센트에로드됩니까?

  6. 6

    PHP exec 명령이 변수가 포함 된 터미널 명령에서 작동하지 않습니다.

  7. 7

    ui 라우터는 명명 된 ui-view에 콘텐츠를 넣지 않습니다.

  8. 8

    템플릿이 명명 된 콘센트로 렌더링되지 않습니다.

  9. 9

    템플릿이 명명 된 콘센트로 렌더링되지 않습니다.

  10. 10

    HDMI 포트에 연결된 모니터가 작동하지 않습니다.

  11. 11

    서명 된 사용자 지정 커널에서 서명 된 모듈을로드 할 수 없습니다.

  12. 12

    갱신 된 코드 서명 인증서가 작동하지 않습니다.

  13. 13

    유추 된 네임 스페이스의 클래스는 작동하지만 명시 적으로 명명 된 경우에는 작동하지 않습니다.

  14. 14

    Laravel 명명 된 경로는 wampserver에서 작동하지 않습니다.

  15. 15

    준비된 명령문 executeUpdate가 업데이트 명령문에서 작동하지 않습니다.

  16. 16

    Angular4 Material MdTable이 라우터 콘센트에서 작동하지 않습니다.

  17. 17

    Angular RouterTestingModule 테스트가 라우터 콘센트에서 구성 요소를 렌더링하지 않습니다.

  18. 18

    이 컴파일 단위가 명명 된 모듈에 연결되어 있기 때문에 명명 된 패키지 일식을 선언해야합니다

  19. 19

    Rails (6.0.3.4) Webpacker (5.2.1) 패키지 가져 오기 오류 :`비 EcmaScript 모듈에서 명명 된 내보내기를 가져올 수 없습니다 .`

  20. 20

    명명 된 함수가있는 window.removeEventListener가 작동하지 않습니다.

  21. 21

    Angular의 지연로드 된 모듈에 중첩 된 자식

  22. 22

    Apache POI MissingCellPolicy가 문서에 설명 된대로 실제로 작동하지 않습니다.

  23. 23

    jQuery가 ajaxally로드 된 데이터에서 작동하지 않습니다.

  24. 24

    익명 함수를 명명 된 함수로 변환하는 JQuery가 제대로 작동하지 않습니다.

  25. 25

    부스트에서 작동하지 않는 명명 된 매개 변수 전달

  26. 26

    서버 측 모듈화 된 코드의 actionButton이 작동하지 않습니다.

  27. 27

    raspbian jessie에 설치된 Python 모듈이 Python 스크립트에서 작동하지 않습니다.

  28. 28

    자체 서명 된 인증서 우회가 작동하지 않음

  29. 29

    pfsense 라우터에 연결된 라우터 전용 설정의 Fritzbox 모뎀 / 라우터가 작동하지만 DHCP 테이블에 표시되지 않습니다.

뜨겁다태그

보관