2016-09-23 4 views
5

私はこのStarter Projectの構造に適合するように既存の角度アプリを修正しようとしています。とにかく、私はサブモジュール(チュートリアル)と私のアプリケーションモジュールを持っているので。Angular2.0ルータはモジュールではなくコンポーネントで動作しますか?

enter image description here ルートドメインに着陸し、ルータのリンクを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にリンクしているのでだから私はこれが起こっていると考えている、などのチュートリアルサブモジュールでTutorialModuleにリンクするだけで、の<my-app></my-app>タグは認識されません。以前はうまくいきましたので、この新しい設定のどの部分がこれを壊しているのかよくわかりません。ここで

は私app.routes.tsです:

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.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.all(/^\/tutorial$/, (req, res) => { 
    res.redirect('/tutorial/'); 
}); 
app.use('/tutorial/', (req, res) => { 
    res.sendFile(resolve(__dirname, '../public/index.html')); 
}); 

をチュートリアルコンポーネントの角度インデックス。

全体レポhere

+0

サーバー側のルートを設定しましたか?もしそうでなければ、動作しません。今すぐ動作させるには、HashLocationStrategyを使用する必要があります。 – micronyks

+0

@micronyksまあ私は私の急なセットアップからの抜粋である最後のスニペットを持っているので、それはそれを行うべきだと思った? –

+0

あなたはHashLocationStrategyで試してみましたか? – micronyks

答えて

2

問題はindex.htmlファイルでした。私は<base href=".">でした。<base href="/">であったはずです。私はバグレポートを持っていますhere

0

@micronyksは、すでにコメントでこれを言っていますが、あなたのindex.htmlページへのすべての要求をリダイレクトするように設定Webサーバーを実行するために必要なものです。その後、あなたのアプリはあなたの「深い」リンクを読み込んでナビゲートします。

+0

はい私は知っています。問題は、一度index.htmlが提供されると、app.componentのセレクタが認識されないmy-appです。私はこれがモジュールのことだと思う、私が子コンポーネントで全く同じことをしているように、すべて正常に動作する –

関連する問題