Angular2.0 라우터는 모듈이 아닌 구성 요소에서 작동합니까?

기존 각도 응용 프로그램을이 구조의 Starter Project에 맞게 수정하려고합니다. 어쨌든, 그래서 내 하위 모듈 (튜토리얼)와 함께 내 애플 리케이션 모듈을 가지고. 어떤 모양입니까?Angular2.0 라우터는 모듈이 아닌 구성 요소에서 작동합니까?

루트 도메인에 착신하고 라우터 링크를 사용하여 http://localhost:3000/tutorial/chapter/0으로 이동하면 모든 것이 정상적으로 작동합니다. 내가 페이지를 새로 고치거나 해당 링크로 직접 이동하려고한다면, 나는 오류를 얻을 :

Unhandled Promise rejection: Template parse errors: 
'my-app' is not a known element: 
1. If 'my-app' is an Angular component, then verify that it is part of this module. 
2. If 'my-app' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. (" 

<body> 
    [ERROR ->]<my-app> 
     <div class="valign-wrapper"> 
      <div class="preloader-wrapper active valign"): [email protected]:4 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse

그래서 이런 일이 생각 때문에 오히려 그 URL이 같은 튜토리얼 서브 모듈과 함께 appcomponent에 연결하는 것보다 Tutorial 모듈에 연결하는 중일 뿐이므로 index.html의 <my-app></my-app> 태그는 인식되지 않습니다. 이것은 이전에 작동했기 때문에이 새로운 구성의 어떤 부분이 이것을 깨뜨 렸는지 확실하지 않습니다.

import { homeComponent } from './components/home/home.component'; 
import { pluginsComponent } from './components/plugins/plugins.component'; 
import { Routes, RouterModule } from '@angular/router'; 

const appRoutes: Routes = [ 
    { path: '', component: homeComponent }, 
    { path: 'tutorial', loadChildren: 'tutorial/tutorial.module', pathMatch: 'prefix'}, 
    { path: 'plugins', component: pluginsComponent } 
]; 

export const appRoutingProviders: any[] = []; 

export const routing = RouterModule.forRoot(appRoutes);

내 tutorial.routes.ts : 여기

내 app.routes.ts입니다

에서 마지막으로

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

import { tutorialComponent } from './tutorial.component'; 
import { chapterComponent } from './chapter/chapter.component'; 

const tutorialRoutes: Routes = [ 
    { 
    path: 'tutorial', 
    component: tutorialComponent, 
    children: [ 
     { path: 'chapter/:id', component: chapterComponent }, 
     { path: '', redirectTo: 'chapter/0', pathMatch: 'full'}, 
    ] 
    } 
]; 

export const tutorialRouting = RouterModule.forChild(tutorialRoutes);

내 app.ts 내가 명시 적 경로를 정의 어디 있습니다

app.all(/^\/tutorial$/, (req, res) => { 
    res.redirect('/tutorial/'); 
}); 
app.use('/tutorial/', (req, res) => { 
    res.sendFile(resolve(__dirname, '../public/index.html')); 
});

가 봉사 자습서 구성 요소에 대한 각도 인덱스.

는

전체의 repo는 here

출처

2016-09-23 George Edwards

서버 측 라우트가 구성 되었습니까? 그렇지 않으면 작동하지 않습니다. 이제 작동 시키려면 HashLocationStrategy를 사용해야합니다. – micronyks

@micronyks 글쎄, 내 익스프레스 설정에서 발췌 한 마지막 스 니펫이 있는데, 그렇게해야한다고 생각 했나요? –

HashLocationStrategy를 사용해 보셨습니까? – micronyks

이 문제는 내가 <base href="."> 곳이 <base href="/">을 했어야했다는 index.html을 파일이었다. 버그 리포트가 있습니다 here

출처

2016-09-26 13:01:02

@micronyks 이미 코멘트에이 말을하지만, 당신이 당신의 index.html 페이지에 대한 모든 요청을 리디렉션하는 설정을 웹 서버를해야 할 일. 그러면 앱이로드되어 '깊은'링크로 이동합니다.

출처

2016-09-23 21:12:56 HisDivineShadow

예, 알고 있습니다. 내 특급 루트가 그렇게 생각합니다. 문제는 일단 index.html이 제공되면 'my-app' - app.component의 선택자가 인식되지 않는 것 같습니다. 나는 모듈 컴포넌트라고 생각한다. 마치 자식 컴포넌트를 가지고 똑같은 일을하는 것처럼 모든 것이 잘 동작한다. –

Angular2.0 라우터는 모듈이 아닌 구성 요소에서 작동합니까?

답변

관련 문제