角2：アドレスバーで子ルートが機能しない

Question

Hei、

私は働いているアプリケーションがあります。私が子コンポーネントに移動すると、それは動作しますが、アドレスバーにパスを書き込むと動作しません。

RouterModule.forRoot([    
     { 
      path:'', 
      component:SiteComponent, 
      children: [{    
      path:'portafolio/:id', 
      component:OutletComponent    
      } 
      ] 
     },  
     { 
      path:'**', 
      redirectTo: '', 
      pathMatch: 'full' 
     },  
     ]), 

私はのは、それが正常に動作しますrouter.navigate(['/portafolio', portafolio.id])を使用して最初のポートフォリオを言わせに移動します。 しかし、アドレスバーlocalhost：4200/portafolio/1に書き込んで最初のポートフォリオに移動したいときは動作しません。 404エラーは表示されません。ただ、「...」と表示されます。これは、index.htmlの<app-root>タグの間にあります。他の間違ったアドレスがSiteComponentにリダイレクトされるため、ワイルドカードは正常に動作します。アドレスバーにパスを書き込んで特定のportafolioを開くことができるようにするには、どうすれば解決できますか？

UPDATE：

RouterModule.forRoot([    
    { 
     path:'', 
     component:SiteComponent   
    }, 
    { 
     path: 'portafolio', 
     component:SiteComponent, 
     children: [{    
     path:':id',    
     component: OutletComponent 
     }]   
    },  
    { 
     path:'**', 
     redirectTo: '', 
     pathMatch: 'full' 
    },  
    ]) 

同じ動作：私はへのルーティングの設定を変更しました。アドレスバーを使用してポートフォリオにアクセスするまでは正常に機能します。 これは私が取得エラーです：

2:19 GET http://localhost:4200/portafolio/inline.bundle.js 
2:19 GET http://localhost:4200/portafolio/polyfills.bundle.js 
2:19 GET http://localhost:4200/portafolio/styles.bundle.js 
2:19 GET http://localhost:4200/portafolio/vendor.bundle.js 
2:19 GET http://localhost:4200/portafolio/main.bundle.js 

これは、ブートストラップコンポーネントです：

import { Component } from '@angular/core'; 

@Component({ 
    selector : 'app-root', 
    template: '<router-outlet></router-outlet>' 
}) 
export class AppComponent { 

} 

これはOutletComponent定義です：

@Component({ 
    templateUrl: './outlet.component.html', 
    styleUrls: ['./outlet.component.css'] 
}) 
export class OutletComponent implements OnInit { 
portafolios:any; 
numero:string; 

constructor(private _router:Router, 
      private _activatedRoute:ActivatedRoute, 
      private _formservice : FormService) { 
    _activatedRoute.params.subscribe((parametro:Params) => this.numero = parametro['id']); 
    _formservice.data$.subscribe(data=> { this.portafolios=data }); 
} 

UPDATE 2： 私は多分そこだと思いました私は単純化してTestComponentを作成しました。

import {Component} from '@ angular/core';

@Component({ 
    template: '<h1>Test</h1>', 
}) 

export class TestRoutesComponent { 

} 

そして、私はアドレスバーhttp://localhost:4200/testroutes/でアクセスしようとすると、まだ私は同じエラーを取得し、別のルート

{path: 'testroutes',component: TestRoutesComponent} 

を追加しました。

SOLUTION：[OK]を私は角-cliのプロジェクトを作成し、ルートがrouter.navigate(['/testroutes')と協力し、またhttp://localhost:4200/testroutes/とされたこの時間は、だから私は2で崇高分割さと慎重に差を見て、私はシンプルなドット<base href="/">この<base href="./">が異なるましたエラーの原因となっていました。私がプロジェクトをクローンしたとき、ドットはそこにあったか、私が知らない何か奇妙な理由のためにそこに置いたのですか？これが誰かを助けることを望みます。

Answer 1

[OK]を、私が作成しましたルートはrouter.navigate(['/testroutes')でもhttp://localhost:4200/testroutes/で働いていた角度-CLIプロジェクトと、この時間は、だから私は2で崇高分割さと慎重に差を見て、私はシンプルなドットがエラーの原因となった<base href="/">この<base href="./">が異なりました。私がプロジェクトをクローンしたとき、ドットはそこにあったか、私が知らない何か奇妙な理由のためにそこに置いたのですか？これが誰かを助けることを望みます。

Answer 2

質問から100％明確ではありませんが、すべてのコンポーネントが単一のAppModuleで定義されていると仮定していますか？

私はあなたのルーティングビットを簡素化することができると思う：

RouterModule.forRoot([    
{ 
    path:'', 
    component:SiteComponent   
    children: [ 
    {    
     path:'portafolio/:id',    
     component: OutletComponent 
    }] 
},  
{ 
    path:'**', 
    redirectTo: '', 
    pathMatch: 'full' 
},  
]) 

SiteComponentテンプレートは、子ルートの<router-outlet>を持っている必要があります（ 'portafolio /：ID'）