RouteConfig does not seem to work in my angular 2 project

Question

I'm trying to use the RouteConfig in my Angular2 application. Right now, I can't seem to find out what I'm doing wrong.

My App component is using the router-outlet thing, but it dosen't work.

I have created a main.ts file which bootstrap my application:

Main.ts

import {provide, enableProdMode, Injectable, Component} from 'angular2/core';
import {bootstrap, ELEMENT_PROBE_PROVIDERS} from 'angular2/platform/browser';
import {ROUTER_PROVIDERS, ROUTER_DIRECTIVES, RouteConfig, LocationStrategy, HashLocationStrategy} from 'angular2/router';
import {HTTP_PROVIDERS} from 'angular2/http';

const ENV_PROVIDERS = [];

if ('production' === process.env.ENV) {
  enableProdMode();
} else {
  ENV_PROVIDERS.push(ELEMENT_PROBE_PROVIDERS);
}

import {App} from './app/app';

/*
 * Bootstrap our Angular app with a top level component `App` and inject
 * our Services and Providers into Angular's dependency injection
 */
document.addEventListener('DOMContentLoaded', function main() {
  bootstrap(App, [ENV_PROVIDERS, HTTP_PROVIDERS, ROUTER_PROVIDERS,  RouteConfig, provide(LocationStrategy, { useClass: HashLocationStrategy }) ])
  .catch(err => console.error(err));

});

App component

// Bootstrapping imports
import { bootstrap } from 'angular2/platform/browser';
import { HTTP_PROVIDERS } from 'angular2/http';
import { ROUTER_PROVIDERS, ROUTER_DIRECTIVES, RouteConfig } from  'angular2/router';
import { Injectable, provide, Component, ViewEncapsulation } from 'angular2/core';

// Import components
import {AmendmentComponent} from '../Components/amendmentComponent';

@Component({
    selector: 'app',
    template: `
<div>
    <div class="header wrapper">
        <header class="row">
            <div class="column small-12">
                <a href="/">
                    <img src="/assets/img/logo.svg" title="" />
                </a>
                <a class="navigation-toggle icon-menu hide-for-large-up" (click)="toggleMenuState()" href="javascript:void(0);"></a>
            </div>
        </header>
    </div>

    <router-outlet></router-outlet>

    <div class="footer wrapper">
        <footer class="row">
            <div class="column small-12">
                <div class="container">
                    <div class="icon icon-ship hide-for-medium-down"></div>
                </div>
            </div>
        </footer>
    </div>
</div>
`,
encapsulation: ViewEncapsulation.None,
directives: [ ROUTER_DIRECTIVES ],
styles: [`
    app {
        display: block;
    }
`]
})

@RouteConfig([
    { path: '/', redirectTo: ["Amendment"] },
    { path: '/amendment/...', name: 'Amendment', component: AmendmentComponent, useAsDefault: true },
])

export class App {
    angularclassLogo = 'assets/img/favicon.ico';
    name = 'AmendmentFront';
    url = '';

    constructor() {

    }
}

When a user enters the address: localhost:3000 or localhost:3000/amendment, it should load the AmendmentComponent component, but nothing happens, I can see the header and the footer, but nothing in the middle where i had the router-outlet.

What am I doing wrong?

After some discussion with a user, I'm getting these errors:

Error during instantiation of Router! (RouterOutlet -> Router). Child routes are not allowed for "/amendment". Use "..." on the parent's route path.

Günter Zöchbauer Günter Zöchbauer · Accepted Answer · 2016-02-02T11:11:29

Angular got more rigid with one of the last alpha or first beta versions about invalid HTML. <img ... /> is not valid in HTML5 even though browsers try to interpret it the way the developer intended it. It can result in unintended results and therefore Angular doesn't try to be too forgiving anymore.

Also add useAsDefault: true to one route.

RouteConfig does not seem to work in my angular 2 project

1 Answers