角度2 - 任意のルート「認証」私はこれは前に頼まれましたが、私が見つけた解決策は、私の状況に適用されません</p> <p>ローカルホストに移動知っ

Question

一致しません：8000/AUTH、私はこのエラーメッセージを取得します。指定された他のルートは正常に動作します。ここで

Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'auth' Error: Cannot match any routes. URL Segment: 'auth'

import { NgModule }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 
import { Routes, RouterModule } from '@angular/router'; 
import { Angular2TokenService } from 'angular2-token'; 

import { AppComponent } from './app.component'; 
import { RecipeComponent } from './recipes/recipes.component'; 
import { RecipeDetailComponent } from './recipes/recipe-detail/recipe-detail.component'; 
import { RecipeService } from './recipes/recipe.service'; 
import { IngredientComponent } from './ingredients/ingredients.component'; 
import { IngredientService } from './ingredients/ingredient.service'; 
import { IngredientFormComponent } from './ingredients/ingredient-form.component'; 
import { AuthComponent } from './auth/auth.component'; 

@NgModule({ 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    RouterModule.forRoot([ 
     { 
     path: '', 
     component: RecipeComponent 
     }, 
     { 
     path: 'auth', 
     component: AuthComponent 
     }, 
     { 
     path: 'recipes', 
     component: RecipeComponent 
     }, 
     { 
     path: 'recipe/:id', 
     component: RecipeDetailComponent 
     } 
    ]) 
    ], 
    declarations: [ 
    AppComponent, 
    RecipeComponent, 
    RecipeDetailComponent, 
    IngredientComponent, 
    IngredientFormComponent, 
    AuthComponent 
    ], 
    providers: [ 
    RecipeService, 
    IngredientService, 
    Angular2TokenService 
    ], 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule { 
    constructor(private _tokenService: Angular2TokenService) { 
    this._tokenService.init(); 
    } 
} 

アプリ/ AUTH/auth.component.ts（その現在空は、単にテンプレートをロードしようとしている）私のapp.module.tsある

import { Component, Input, OnInit } from '@angular/core'; 
import { Router } from '@angular/router'; 

@Component({ 
    selector: 'auth', 
    templateUrl: 'app/auth/auth.component.hmtl' 
}) 

export class AuthComponent implements OnInit { 
    ngOnInit(): void { 
    } 
    constructor(){} 
} 

package.json

{ 
    "name": "geekbread_js", 
    "version": "1.0.0", 
    "scripts": { 
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ", 
    "lite": "lite-server", 
    "postinstall": "typings install", 
    "tsc": "tsc", 
    "tsc:w": "tsc -w", 
    "typings": "typings" 
    }, 
    "license": "ISC", 
    "dependencies": { 
    "@angular/common": "2.1.2", 
    "@angular/compiler": "2.1.2", 
    "@angular/core": "2.1.2", 
    "@angular/forms": "2.1.2", 
    "@angular/http": "2.1.2", 
    "@angular/platform-browser": "2.1.2", 
    "@angular/platform-browser-dynamic": "2.1.2", 
    "@angular/router": "3.1.2", 
    "@angular/router-deprecated": "2.0.0-rc.2", 
    "@angular/upgrade": "2.1.2", 
    "angular2-in-memory-web-api": "0.0.21", 
    "angular2-token": "^0.1.17", 
    "bootstrap": "^3.3.6", 
    "core-js": "^2.4.0", 
    "reflect-metadata": "^0.1.3", 
    "rxjs": "5.0.0-beta.12", 
    "systemjs": "0.19.40", 
    "zone.js": "^0.6.12" 
    }, 
    "devDependencies": { 
    "concurrently": "^3.1.0", 
    "lite-server": "^2.2.0", 
    "typescript": "^2.0.6", 
    "typings": "^1.0.4" 
    } 
} 

私は、これは持っているとは思わない私は

***** UPDATEをindex.htmlをする<base href="/">をも追加しました

app.component.html

<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" routerLink="/recipes">Geekbread</a> 
    </div> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
     <li><a routerLink="/recipes">My Recipes</a></li> 
     <li><a routerLink="/auth">Sign in</a></li> 
     </ul> 
    </div> 
    </div> 
</nav> 
<router-outlet></router-outlet> 

*****

実際のコードとは何か、tsconfig.jsonで指定した 'outDir'を見ると、新しいコードをコンパイルしていないようです。私はrm -rfでそのディレクトリを作成し、正しいコードで再構築しましたが、main.jsファイルがありません。

ERROR：

アプリで/

をmain.js/buildjsするコンパイルではなく、 npm start

すべてでサーバを実行して

{ 
    "compilerOptions": { 
    "target": "es5", 
    "module": "commonjs", 
    "moduleResolution": "node", 
    "sourceMap": true, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "removeComments": false, 
    "noImplicitAny": false, 
    "outDir": "buildjs/" 
    } 
} 

tsconfig.json

localhost/:20 Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:8001/buildjs/main.js

Answer 1

追加pathMatch: 'full'のルートに空のパスがあり、子なし：

{ 
    path: '', 
    component: RecipeComponent, 
    pathMatch: 'full' 
    },