Angular 2 - jede Routen ‚Auth‘ Kann nicht

Question

Ich weiß, passen diese zuvor gestellt wurde, aber keine Lösung, die ich gefunden habe, gilt für meine Situation

wenn auf localhost Navigation: 8000/Auth, erhalte ich diese Fehlermeldung . Die anderen angegebenen Routen funktionieren gut.

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

Hier ist meine 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(); 
    } 
} 

app/Auth/auth.component.ts (seine derzeit leer, nur die Vorlage versucht zu laden)

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> 

ich auch <base href="/"> hinzugefügt haben

***** ***** UPDATE

Ich glaube nicht an index.html hat alles, was mit dem eigentlichen Code zu tun hat, mit Blick auf den 'outDir', den ich in tsconfig.json angegeben habe. Der neue Code scheint nicht zu kompilieren. Ich rm-rf'ed dieses Verzeichnis und jetzt seine Neuerstellung mit dem richtigen Code, aber fehlt die Datei main.js.

ERROR:

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/" 
    } 
} 

Betrieb des Servers mit npm start

alles in app// bis buildjs kompiliert, aber nicht main.js

Answer 1

Hinzufügen pathMatch: 'full' zu Routen mit leerem Pfad und keine Kinder:

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