title: Angular 2 - Cannot match any routes 'auth'
body: <p>I know this has been asked before, but no solution I've found applies to my situation</p>
  
  <p>when navigating to localhost:8000/auth, I get this error message. The other routes specified work fine.</p>
  
  <p><code>Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'auth'
  Error: Cannot match any routes. URL Segment: 'auth'</code></p>
  
  <p>Here is my app.module.ts</p>
  
  <pre><code>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();
    }
  }
  </code></pre>
  
  <p>app/auth/auth.component.ts (its currently empty, just trying to load the template)</p>
  
  <pre><code>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(){}
  }
  </code></pre>
  
  <p>package.json</p>
  
  <pre><code>{
    "name": "geekbread_js",
    "version": "1.0.0",
    "scripts": {
      "start": "tsc &amp;&amp; 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"
    }
  }
  </code></pre>
  
  <p>app.component.html</p>
  
  <pre><code>&lt;nav class="navbar navbar-default"&gt;
    &lt;div class="container-fluid"&gt;
      &lt;div class="navbar-header"&gt;
        &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"&gt;
          &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;/button&gt;
        &lt;a class="navbar-brand" routerLink="/recipes"&gt;Geekbread&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
        &lt;ul class="nav navbar-nav"&gt;
          &lt;li&gt;&lt;a routerLink="/recipes"&gt;My Recipes&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a routerLink="/auth"&gt;Sign in&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p>I've also added <code>&lt;base href="/"&gt;</code> to index.html</p>
  
  <p>***** UPDATE *****</p>
  
  <p>I don't think this has anything to do with the actual code, looking at the 'outDir' I specified in tsconfig.json, It didn't seem to compile the new code. I rm -rf'ed that directory, and now its rebuild with the correct code, but is missing the main.js file.</p>
  
  <p>ERROR:</p>
  
  <p><code>localhost/:20 Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:8001/buildjs/main.js</code></p>
  
  <p>tsconfig.json</p>
  
  <pre><code>{
    "compilerOptions": {
      "target": "es5",
      "module": "commonjs",
      "moduleResolution": "node",
      "sourceMap": true,
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "removeComments": false,
      "noImplicitAny": false,
      "outDir": "buildjs/"
    }
  }
  </code></pre>
  
  <p>running the server with <code>npm start</code></p>
  
  <p>everything in app/ is compiling to buildjs/, but not main.js </p>