角2 - 无法匹配任何路线“权威性”

Question

我知道这已经被问过，但没有解决方案，我已经找到适用于我的情况

导航到本地主机时

：8000/AUTH，我得到这个错误信息。其他路线指定工作正常。

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

这里是我的app.module.ts

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.component.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" 
    } 
} 

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> 

我还添加了<base href="/">到index.html的

***** UPDATE *****

我不认为这有看看我在tsconfig.json中指定的'outDir'，看起来没有编译新的代码。我rm -rf'ed该目录，现在它重建与正确的代码，但缺少main.js文件。

错误：

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

tsconfig.json

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

运行中的应用程序与npm start

所有服务器/正在编制到buildjs /，但不main.js

Answer 1

加pathMatch: 'full'与空路径路由时的无子女：

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