Angular 2 -不能匹配任何路由'auth'

Angular 2 - Cannot match any routes 'auth'

本文关键字：路由 auth 任何 不能 Angular      更新时间：2023-09-26

我知道以前有人问过这个问题，但是我没有找到适用于我的情况的解决方案

导航到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>

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

***** UPDATE *****

我不认为这与实际的代码有任何关系，看看我在tsconfig中指定的'outDir'。它似乎没有编译新的代码。我命令-rf'该目录，现在用正确的代码重建，但缺少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运行服务器

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

将pathMatch: 'full'添加到空路径且没有子路径的路由中:

 {
    path: '',
    component: RecipeComponent,
    pathMatch: 'full'
  },
相关文章：