Add npm/yeoman task to make a component routable.

[cmelion]

Not all components will have routes associated with them. Provide a generator task for adding a component to the route config (possibly a task to remove a component as well).

The user will be presented a list of components (that do not already have routes) to choose from.

--- Want to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/31646267-add-npm-yeoman-task-to-make-a-component-routable?utm_campaign=plugin&utm_content=tracker%2F32095848&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F32095848&utm_medium=issues&utm_source=github).

[pavanpodila]

I think route should be a subcommand

[cmelion]

@pavanpodila agreed

[pavanpodila]

Also we can place routes inside a /routes folder at top level (peer of components). This also demarcates the hierarchy within the app

[cmelion]

@pavanpodilla: absolutely! I was a big fan of the way we separated routes in SalesLink, where the route was co-located in the same file with the page/component and we just imported/required them into routes/index. Even if we don't go that far a top-level /routes folder is the way to go.

[pavanpodila]

Ya, I still use that idea in many of my projects. One convention I've adopted for route components is to have a XXXRouteComponent suffix. It also makes it easier to search in the IDE. Also if you want to promote a component to a route at some point, its a matter of renaming it to XXXRouteComponent

[cmelion]

I like the idea of .route, similarly I like .async and .async.route but XXXRouteComponent is pretty verbose.

See https://github.com/cmelion/generator-ng2-webpack/wiki/I-hate-that-all-the-files-are-named-index.ts,-style.scss-and-template.html!

It might be a good idea to make naming conventions a pluggable configuration.

[cmelion]

It seems to me that the long-names convention is an artifact of everything being dumped into the same directory in "toy" apps.

[cmelion]

I'm ok with the long-names for classes though.

[cmelion]

How about just naming it routes.ts and putting the file directly under app?

// src/app/routes.ts
import {Home} from './components/home';     // ./components/home/index.ts

export default [
        {path: '/', component: Home, name: 'Home'},
        // Async load a component using Webpack's require with es6-promise-loader
        { path: '/about', loader: () => require('./components/about')('About'), name: 'About' }
];

// src/app/index.ts
import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {FORM_PROVIDERS} from 'angular2/common';

import '../style/app.scss';

import {Api} from './services/api';         // ./services/api/index.ts
import routes from './routes';

/*
 * App Component
 * Top Level Component
 */
@Component({
  selector: 'app', // <app></app>
  providers: [...FORM_PROVIDERS, Api],
  directives: [...ROUTER_DIRECTIVES],
  pipes: [],
  styles: [require('./style.scss')],
  template: require('./template.html')
})

@RouteConfig(routes)

export class App {
  url: string = 'https://github.com/cmelion/ng2-webpack';

  constructor(public api: Api) {
  }
}

The sub-generator can take an async param or have two separate sub-generators, one for sync and one for async routes?

The sync needs to add the component import to routes and a route-array item. The async just needs to add a route-array item.

[pavanpodila]

This works for top level routes. How about nested or child routes?

[cmelion]

Yeah, I was thinking about that, the components are nested, wouldn't just repeating the pattern on the child components work?

My reading of http://plnkr.co/edit/Bim8OGO7oddxBaa26WzR?p=preview implies that it would, but sanity check me on that, ok?