홈>
현재 Angular2의 응용 프로그램 중 하나를 작업 중입니다. 다른 하위 기능 모듈이 포함 된 3 개의 기능 모듈이 있습니다. 기능 1의 하위 기능 모듈을 기능 2의 하위 기능 모듈에로드하거나 그 반대로로드하려고합니다. 아래는 샘플 코드입니다.
action-routing.module.ts
const routes: Routes = [
{
path: '',
component: ActionComponent,
children: [
{
path: ':id',
loadChildren: 'app/action/action-detail/action-detail.module#ActionDetailModule'
}
]
}
];
action-detail-routing.module.ts
const routes: Routes = [
{
path: '',
component: ActionDetailComponent,
},
{
path: 'topic-detail/:id',
loadChildren: 'app/topic/decision-topic-detail/decision-topic-detail.module#DecisionTopicDetailModule',
}
]
topic-routing.module.ts
const routes: Routes = [
{
path: '',
component: TopicComponent,
children: [
{
path: ':id',
loadChildren: 'app/topic/decision-topic-detail/decision-topic-detail.module#DecisionTopicDetailModule'
}
]
}
];
decision-topic-detail-routing.module.ts
const routes: Routes = [
{
path: '',
component: DecisionTopicDetailComponent,
},
{
path: 'action-detail/:id',
loadChildren: 'app/action/action-detail/action-detail.module#ActionDetailModule'
}
]
이것은 주기적 종속성을 생성하고 컴파일 타임에최대 호출 스택 크기 초과 오류오류를 발생시킵니다.
이 오류를 해결할 방법이 있습니까? 한 가지 방법은 전체 기능 모듈을 자체로드하는 것이지만 실행 가능한 상황은 아닙니다.
미리 감사합니다.
- 답변 # 1
관련 자료
- powerquery - dax - userelationship 사용 및 순환 종속성 감지 오류 발생
- 파이썬에 대한 순환 종속성을 해결하기 위해 제공된 솔루션이 작동하지 않습니다
- javascript - 기능 모듈의 구성 요소에서 앱 모듈의 구성 요소 사용
- 각도 6 오류 - 종속성 유형에 사용 가능한 모듈 팩토리가 없습니다 contextelementdependency
- typescript - 각도 모듈에서 모듈에 내 보낸 멤버 오류가 없습니다
- sharepoint online - 각도 6의 Ng 모듈 시계는 HTML 페이지를 업데이트하지 않습니다
- webpack - CLI없이 각도 모듈을 지연로드하는 방법은 무엇입니까?
- Angular - 모난, 딱딱한, 모서리가있는, 각도의, 뼈가 앙상한 - 제품 빌드에서 지연로드 모듈을 제외하는 방법은 무엇입니까?
- npm - 각도 라이브러리 의존성 노출
- javascript - 앵귤러 7 - 가져온 모듈에서 컴포넌트 가져 오기
- angular - 순환 종속성없이 양방향 선택자 작성
- angular7 - Angular 7 파일 '/src/types/@angular/commondts'는 모듈이 아닙니다
- android - 특정 풍미와의 의존성으로 gradle 모듈 사용
- 유효성 검사 및 인텔리전스를 위해 다른 모듈의 Angular 인터페이스를 사용하는 방법
- typescript - 각도는 모듈을 찾을 수 없지만 여전히 실행됩니다
- ionic framework - 각도에서 다른 경로를 사용하여 동일한 모듈을 사용하는 방법
- 각도 CLI를 사용하여 지연 로딩 모듈을 생성하는 방법
- 모듈에 Angular에 내 보낸 멤버 'CanActivate'가 없습니다
- java - Spring 컨텍스트에 대한 순환 종속성을 해결하는 방법은 무엇입니까?
- angular6 - Angular 6 모듈이 올바르게 반입되지 않습니다
관련 질문
- Angular 6의 싱글 톤 서비스와 동시성
- typescript : Webpack이 파일 변경을 감지하지 못함
- TypeScript로 Angular에서 객체를 반복하는 올바른 접근 방식은 무엇입니까?
- angular : moment.js 함수를 감시하는 동안 문제가 발생했습니다.
- javascript : Angular에서 내보내기 기능을 어떻게 분류하고 호출해야합니까?
- angular : 각도로 서비스를 부르는 데코레이터?
- javascript : Angular 9 모델에 바인딩 선택
- Angular Universal 빌드가 API 요청이있는 사전 렌더링 페이지에서 중단됨
- reactjs : TypeScript에서 일반 유형 이름을 얻는 방법은 무엇입니까?
- angular : HttpInterceptor를 사용한 헤더 설정 문제
경로는 구성 요소와 분리되어 있고 해당 구성 요소가 선언 된 모듈 외부에 있어야합니다.
오랫동안, 당신도 사용하고있는 패턴을 따랐습니다. 와이즈 비즈
topic-routing.module.ts
와 함께 사는 것처럼보여 구성 요소. 하지만 최근에는 다른 시각으로 생각하기 시작했으며 여기에있는 수수께끼가이를 완벽하게 강조합니다.와이즈 비즈에 대한 생각을 시작했다 주어진 응용 프로그램의 핵심으로. 이 패러다임 전환은 두 번째 응용 프로그램 작성을 시작했을 때 발생했으며 첫 번째 응용 프로그램에서 작성한 많은 구성 요소/모듈을 재사용하기로 결정했습니다. 재사용이 불가능한 유일한 경로는 경로라는 것을 알았습니다.
라우트가 "앱"을 정의한 것과 같았고 모듈/컴포넌트는 주어진 응용 프로그램에서 사용할 빌딩 블록입니다.
그 빛에서, 나는 다음을 추천 할 것이다 :
라우트 정의를 각 모듈에서 최상위 앱으로 옮기십시오. app.routes 옆의 디렉토리에있을 수 있으며 현재 파일에 분산 상태로 유지하거나 파일이 많지 않은 경우 동일한 파일로 병합 할 수 있습니다.
반 직관적으로 보일 수 있으며 모든
topic
에서 "수직"그룹화를 잃게됩니다. 주제와 모든routes
와 함께 생활 물건은 행동으로 산다. 그러나 경로를 참조하는 구성 요소와 근본적으로 다른 동물로 간주하면 덜 고통스럽고 확실히 문제를 해결합니다.action