CODEWITHSUNDEEP
angularangular2-routing
Shafayat Alam
Shafayat Alam

Reputation: 730

Child routes in angular 2

This is my app.component.ts:

@RouteConfig([
    {path: '/', name: 'Home', component: HomePageComponent},
    {path: '/users/...', name: 'Users', component: UsersComponent},
    {path: '/posts', name: 'Posts', component: PostsComponent},
    {path: '/*others', redirectTo: ['Home']}
])

@Component({
    selector: 'my-app',
    templateUrl: 'app/app.template.html',
    styleUrls: ['app/app.style.css'],
    directives: [ROUTER_DIRECTIVES, PostsComponent, UsersComponent, HomePageComponent, AddUserComponent]
})
export class AppComponent {
    constructor(private router:Router) {
    }

    public isRouteActive(route) {
        return this.router.isRouteActive(this.router.generate(route))
    }
}

Here is users.component.ts:

@RouteConfig([
    {path: '/new', name: 'AddUser', component: AddUserComponent},
    {path: '/', name: 'FakePage', component: FakeComponent, useAsDefault: true},
])
@Component({
    selector: 'users',
    templateUrl: 'app/users.template.html',
    providers: [HTTP_PROVIDERS, ROUTER_PROVIDERS],
    directives: [ROUTER_DIRECTIVES],
    styles: [`.glyphicon-remove{color: #b20000;} a{text-decoration: none!important;}.btn-add-user{background: #2c3e52;color: white;margin-bottom: 10px}`]
})

export class UsersComponent {
    private _users:User;

    constructor(private _http:Http) {
        var headers = new Headers({"Access-Control-Allow-Methods": "GET,POST"});
        var options = new RequestOptions({
            headers: headers
        });

        var users = this._http.get('http://jsonplaceholder.typicode.com/users', options)
            .map(res => res.json()).subscribe(data=> {
                this._users = data
            });
    }
}

And users.template.html is like this:

<h1>Users</h1>

<a class="btn btn-add-user" [routerLink]="['AddUser']">Add User</a>
<table class="table table-bordered">
    <thead>
    <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Edit</th>
        <th>Delete</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let user of _users">
        <td>{{user.name}}</td>
        <td>{{user.email}}</td>
        <td><a href="#" class="glyphicon glyphicon-edit"></a></td>
        <td><a href="#" class="glyphicon glyphicon-remove"></a></td>
    </tr>
    </tbody>
</table>

Now, when I visit Users page chrome console throws errors:

Error: Component "AppComponent" has no route named "AddUser". at new BaseException (router-deprecated.umd.js:648) at RouteRegistry.exports.RouteRegistry.RouteRegistry._generate (router-deprecated.umd.js:2389) at RouteRegistry.exports.RouteRegistry.RouteRegistry.generate (router-deprecated.umd.js:2327) at RootRouter.exports.Router.Router.generate (router-deprecated.umd.js:2984) at RouterLink.exports.RouterLink.RouterLink._updateLink (router-deprecated.umd.js:3359) at RouterLink.set [as routeParams] (router-deprecated.umd.js:3371) at DebugAppView._View_UsersComponent0.detectChangesInternal (UsersComponent.template.js:146) at DebugAppView.AppView.detectChanges (core.umd.js:9996) at DebugAppView.detectChanges (core.umd.js:10084) at DebugAppView.AppView.detectViewChildrenChanges (core.umd.js:10016)

And Add User button doesn't work.

Upvotes: 1

Views: 413

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 658017

Don't provide ROUTER_PROVIDERS on every component. They must only be provided once, either in the root component or in bootstrap()

Remove

ROUTER_PROVIDERS

from providers: [] of your UserComponent and add it to AppComponent

Hint

  • CORS headers

    var headers = new Headers({"Access-Control-Allow-Methods": "GET,POST"});

have to be added by the server to allow CORS requests. Adding them on the client has no effect.

See also Origin is not allowed by Access-Control-Allow-Origin

  • providers

There is no need to add components to directives: [...] that are added by the router. Only directives directly used in the template need to be listed (except when they are already provided by PLATFORM_DIRECTIVES like ngFor)

Upvotes: 3

Related Questions