CODEWITHSUNDEEP
typescriptangularangular-routing
Soviut
Soviut

Reputation: 91545

Why won't this route with params work in Angular2?

I'm trying to get a simple route with a parameter working in Angular2. I'm using Angular 2.0.0-rc.2 and angular router 3.0.0-alpha.7. Most of what I have is based directly on the updated documentation on routing https://angular.io/docs/ts/latest/guide/router.html

index.html

<!doctype html>
  <html>
    <head>
      <base href=".">
      ...

main.ts

import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app';
import { HTTP_PROVIDERS } from '@angular/http';
import { APP_ROUTER_PROVIDERS } from './app/app.routes';

bootstrap(AppComponent, [
    HTTP_PROVIDERS,
    APP_ROUTER_PROVIDERS
])
    .catch(err => console.error(err))
;

app.routes.ts

export const routes: RouterConfig = [
    { path: 'featured',       component: FeaturedPageComponent },
    { path: 'containers/:id', component: ContainerEditComponent }
];

export const APP_ROUTER_PROVIDERS = [
    provideRouter(routes)
];

container-edit.component.ts

@Component({
    moduleId: module.id,
    selector: 'container-edit',
    templateUrl: 'container-edit.component.html',
    styleUrls: ['container-edit.component.css']
})
export class ContainerEditComponent implements OnInit, OnDestroy {
    private sub: any;

    constructor(
        private route: ActivatedRoute,
        private router: Router
    ) {
    }

    ngOnInit() {
        this.sub = this.route.params.subscribe(params => {
            let id = +params['id']; // + converts string to number
            console.log(id);
        });
    }

    ngOnDestroy() {
        this.sub.unsubscribe();
    }
}

When I hit http://localhost:4200/containers/1337 I get the following error.

EXCEPTION: Error: Uncaught (in promise): Error: Cannot match any routes: '1337'

Upvotes: 3

Views: 1835

Answers (1)

Ron
Ron

Reputation: 209

Updated Answer:

Set your base to <base href="/" /> in your index.html. The angular2 documentation pushes you to use <base href="." /> because throughout their heroes project they specifically use router.navigate which is good because it forces you to start from the default route then from there work up a history.

But in some cases where you want the user to be able to directly travel to a particular path then you'd have to use /

Original Answer:

Check your paths, did you purposely change it? the samples does not include an 'app' subfolder.

import { AppComponent } from './app/'; <--- check this
import { HTTP_PROVIDERS } from '@angular/http';
import { APP_ROUTER_PROVIDERS } from './app/app.routes'; <--- and this

Upvotes: 1

Related Questions