CODEWITHSUNDEEP
angularangular2-routing
user265732
user265732

Reputation: 585

Angular2 Routing

I was following this tutorial of routing in Angular, and it just doesn't work. When I use the 'comp' selector to put it's HTML code, it works, but when I'm trying to route it with router-outlet, it just shows the header from index.html.

I have the following:

main.ts:

import * as ng from 'angular2/angular2';
import {Comp} from './comp';
@ng.Component({
    selector: 'my-app'
})
@ng.View({
    directives: [ng.formDirectives, ng.RouterOutlet],
    template: `
    <nav>
      <ul>
        <li>Start</li>
        <li>About</li>
        <li>Contact</li>
      </ul>
    </nav>
    <main>
      <router-outlet></router-outlet>
    </main>
  `
})
@ng.RouteConfig([{ path: '/', component: Comp }])
class AppComponent {
}
ng.bootstrap(AppComponent, [ng.routerInjectables]);

comp.ts:

import * as ng2 from 'angular2/angular2';
@ng2.Component({
    selector: 'comp'
})
@ng2.View({
    template: `
    <h1>hi<h1>
  `
})
export class Comp {
    constructor() {
    }
}

index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Test3</title>
    <script src="lib/traceur/traceur.js"></script>
    <script src="lib/system.js/dist/system.js"></script>
    <script src="lib/angular2-build/angular2.js"></script>
    <script src="lib/angular2-build/router.dev.js"></script>
    <script>
        System.config({
            packages: { 
                'js': {
                    defaultExtension: 'js'
                } 
            }
        });
        System.import('/js/main');
    </script>
</head>
<body>
    <h1>Hello There</h1>
    <my-app></my-app>
</body>
</html>

Upvotes: 7

Views: 2903

Answers (7)

musecz
musecz

Reputation: 805

Try to remove the / in your path as below : @ng.RouteConfig([{ path: "", component: Comp }]).

You don't need to specify the slash in your route configuration.

Upvotes: 0

G.T.
G.T.

Reputation: 562

On the tutorial you are following they finally stated it's deprecated, you can read it in bold:

Deprecation Note

We are very sorry, but this article is out of date and has been deprecated. Usually, we keep our articles up to date, however, with this one it's very likely that we've written a complete new version.

If you wish to use the routing component I would suggest to update your Angular 2 version. Be aware that quite a few settings has changed in RC, so you'll probably will need to set up the config again from the official site and make few changes.

Another user had similar issue like you here and with upgrading the problem was solved. Just upgrade the version, fix the config and use this official documentation from here

Upvotes: 2

Pardeep Jain
Pardeep Jain

Reputation: 86730

May be too late for answer but wroth reading whole answer, give it a try :P

  • View is no more in angular2, if you are using still @view annotation it may cause producing some kind of error. so Only Component is the place that will hold the all options.

As per officials , @View metadata decorator has been deprecated in beta.10 release.

  • ROUTER_DIRECTIVES need when you are doing stuff related to Routing in angular2. by injecting ROUTER_DIRECTIVES in the list of directives, routerLink and router-outlet property required for routing automatically available to your component. you can inject ROUTER_DIRECTIVES at the time of bootstrapping your app instead of injecting every time in every component's directives list.

Instead of posting whole answer posting link to some usefull answers related to routing see here also -

Upvotes: 1

Evan Plaice
Evan Plaice

Reputation: 14140

Breaking changes were introduced in [email protected]

  • routerInjectables was renamed to ROUTER_BINDINGS

  • ROUTER_BINDINGS was then renamed to ROUTER_PROVIDERS

Aside: Lots of breaking changes lately so virtually none of the online examples are reliable.

Use ROUTER_PROVIDERS

It includes:

  • RouteRegistry - the registry of defined routes
  • LocationStrategy = PathLocationStragety - match routes by path

This is basically a shortcut to bootstrap your Router with a default setup.

For example:

@Component ({
...
})
@View ({
...
})
@RouteConfig ({
...
})
class App {}

bootstrap(App, [ ROUTER_PROVIDERS ]);

Sources:

Upvotes: 7

punov
punov

Reputation: 828

You can find current most popular working example of routing here

Look into app/app.ts:

import {Component, bind, bootstrap, ViewEncapsulation} from 'angular2/angular2';
import {
  RouteConfig,
  ROUTER_DIRECTIVES,
  ROUTER_BINDINGS,
  ROUTER_PRIMARY_COMPONENT
} from 'angular2/router';

import {Home} from './components/home/home';
import {About} from './components/about/about';
...
@Component({ /// your root component
})
@RouteConfig([
  { path: '/', component: Home, as: 'Home' },
  { path: '/about', component: About, as: 'About' }
])
class App {}

bootstrap(App, [
  ROUTER_BINDINGS,
  bind(ROUTER_PRIMARY_COMPONENT).toValue(App)
]);

Upvotes: 4

user2379441
user2379441

Reputation: 148

The angular2 router has evolved phenomenally, for all those still stuck with the old tutorials that have not reflected the changes be ready for massive surprises. I would suggest you guys to have a look at my inventman project, which is on the bleeding edge of angular2. I am not promoting it, as it is a closed-source project. You can have ideas about routing and almost all angular2 principles from it. Unlike other tutorials it is a full blown working project.

https://github.com/debanjanbasu/inventman

Upvotes: -1

Ajden Towfeek
Ajden Towfeek

Reputation: 387

Since you don't provide the error message, here's a working sample https://github.com/ajtowf/ng2_play with a video tutorial https://youtu.be/ZsGRiHSaOxM

Upvotes: -1

Related Questions