Question

我知道以前曾经问过这个问题，但我找不到适合我情况的解决方案

导航到localhost：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();
  }
}

app / auth / 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>

我还在index.html

中添加了<base href="/">

*****更新*****

我认为这与实际代码没有任何关系，看看我在tsconfig.json中指定的'outDir'，它似乎没有编译新代码。我rm -rf'ed目录，现在用正确的代码重建，但缺少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/"
  }
}

使用npm start

运行服务器

app /中的所有内容都在编译为buildjs /，但不是main.js

Answer 1

将pathMatch: 'full'添加到空路径为无子路径的路由中：

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

Angular 2 - 无法匹配任何路线'auth'

1 个答案: