Do I need the ROUTER_DIRECTIVE in every component in angular2 RC4?

Question

I am building an angular 2 application. Is is a small one, has 3 to 5 components and is based on the tutorial. I learned how to share date via a Service for more than one Component by adding it into the array of the bootsrap function in my main.ts.

Is there something similar for ROUTER_DIRECTIVES. I want to make all my routes available to all components. I want to add routerLinks in some of the templates, but if I don't add the ROUTER_DIRECTIVES into the directives array as meta data for the component, I cant use the routerLink.

My question is, can I avoid this snippet by defining a global ROUTER_DIRECTIVES for every component in my application?

@Component({
  selector: 'players',
  templateUrl: 'app/players.html',
  directives: [ROUTER_DIRECTIVES]
})
export class PlayersComponent {}

Günter Zöchbauer · Accepted Answer · 2016-08-05T06:54:13.060

2

Currently (RC.4) you can do

bootstrap(AppComponent, 
    [{provide: PLATFORM_DIRECTIVES, useValue: [ROUTER_DIRECTIVES], multi: true}]);

With the next update (RC.5) and introduction of modules, you can provide directives for a whole module.

edited Aug 05 '16 at 06:54

answered Aug 05 '16 at 06:31

Günter Zöchbauer

623,577
216
2,003
1,567

score 0 · Answer 2 · answered Aug 05 '16 at 06:28

If you are using webpack to package your app, I think you could configure it to include [ROUTER_DIRECTIVES] by default:

var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var extractCSS = new ExtractTextPlugin('vendor.css');
var isDevelopment = process.env.ASPNETCORE_ENVIRONMENT === 'Development';

module.exports = {
    resolve: {
        extensions: [ '', '.js' ]
    },
    module: {
        loaders: [
            { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' },
            { test: /\.css/, loader: extractCSS.extract(['css']) }
        ]
    },
    entry: {
        vendor: [
            'bootstrap',
            'bootstrap/dist/css/bootstrap.css',
            'es6-shim',
            'style-loader',
            'jquery',
            '@angular/common',
            '@angular/compiler',
            '@angular/core',
            '@angular/http',
            '@angular/platform-browser',
            '@angular/platform-browser-dynamic',
            '@angular/router',
            '@angular/platform-server',
        ]
    },
    output: {
        path: path.join(__dirname, 'wwwroot', 'dist'),
        filename: '[name].js',
        library: '[name]_[hash]',
    },
    plugins: [
        extractCSS,
        new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.DllPlugin({
            path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),
            name: '[name]_[hash]'
        })
    ].concat(isDevelopment ? [] : [
        new webpack.optimize.UglifyJsPlugin({
            compress: { warnings: false },
            minimize: true,
            mangle: false // Due to https://github.com/angular/angular/issues/6678
        })
    ])
};

Do I need the ROUTER_DIRECTIVE in every component in angular2 RC4?

2 Answers2