javascript angular angular2-routing ecmascript-5 angular2-components

Root component renders itself in router outlet

Here is the structure of the angular 2 js(ES2015) project:

src ├── app.js ├── components │ ├── app │ ├── index.js │ ├── list │ ├── loess │ └── nw ├── modules │ ├── app.module.js │ └── index.js ├── routes │ ├── app.routes.js │ └── index.js └── vendor.js

I can't get at how to use router outlet tag. When I use it in a root component template, the tag makes this component renders twice in itself replacing router outlet tag. Sorry for tautology. In addition to this, I have the error: Uncaught (in promise): SyntaxError: Failed to execute 'add' on 'DOMTokenList': The token provided must not be empty.

Here is the image with rendered content.

That is original stacktrace:

angular.vendor.js:2723ORIGINAL STACKTRACE:ErrorHandler.handleError @ angular.vendor.js:2723next @ angular.vendor.js:3586schedulerFn @ angular.vendor.js:3341SafeSubscriber.__tryOrUnsub @ angular.vendor.js:4971SafeSubscriber.next @ angular.vendor.js:4926Subscriber._next @ angular.vendor.js:4880Subscriber.next @ angular.vendor.js:4844Subject.next @ angular.vendor.js:4451EventEmitter.emit @ angular.vendor.js:3341onError @ angular.vendor.js:3421onHandleError @ angular.vendor.js:3349ZoneDelegate.handleError @ angular.vendor.js:24550Zone.runGuarded @ angular.vendor.js:24468_loop_1 @ angular.vendor.js:24709drainMicroTaskQueue @ angular.vendor.js:24717ZoneTask.invoke @ angular.vendor.js:24639 2016-10-15 22:29:01.285 angular.vendor.js:2723Error: Uncaught (in promise): SyntaxError: Failed to execute 'add' on 'DOMTokenList': The token provided must not be empty. at resolvePromise (angular.vendor.js:24762) at angular.vendor.js:24796 at ZoneDelegate.invokeTask (angular.vendor.js:24572) at Object.onInvokeTask (angular.vendor.js:3347) at ZoneDelegate.invokeTask (angular.vendor.js:24572) at Zone.runTask (angular.vendor.js:24488) at drainMicroTaskQueue (angular.vendor.js:24699) at XMLHttpRequest.ZoneTask.invoke (angular.vendor.js:24639)ErrorHandler.handleError @ angular.vendor.js:2723next @ angular.vendor.js:3586schedulerFn @ angular.vendor.js:3341SafeSubscriber.__tryOrUnsub @ angular.vendor.js:4971SafeSubscriber.next @ angular.vendor.js:4926Subscriber._next @ angular.vendor.js:4880Subscriber.next @ angular.vendor.js:4844Subject.next @ angular.vendor.js:4451EventEmitter.emit @ angular.vendor.js:3341onError @ angular.vendor.js:3421onHandleError @ angular.vendor.js:3349ZoneDelegate.handleError @ angular.vendor.js:24550Zone.runGuarded @ angular.vendor.js:24468_loop_1 @ angular.vendor.js:24709drainMicroTaskQueue @ angular.vendor.js:24717ZoneTask.invoke @ angular.vendor.js:24639

vendor.js:

//Polyfill
import '../node_modules/core-js';
import '../node_modules/zone.js';
import '../node_modules/reflect-metadata';
import '../node_modules/system';
//Dependencies
import '../node_modules/rxjs';

// Core
import '../node_modules/@angular/platform-browser';
import '../node_modules/@angular/platform-browser-dynamic';
import '../node_modules/@angular/forms';
import '../node_modules/@angular/http';
import '../node_modules/@angular/router';
import '../node_modules/@angular/core';
import '../node_modules/@angular/common';
import '../node_modules/@angular/compiler';

//jQuery
import '../node_modules/jquery';
//Bootstrap
import '../node_modules/bootstrap';
//Bootstrap sidebar
import '../node_modules/bootstrap-layout';
//Bootstrap slider
import '../node_modules/bootstrap-slider';

app.js:

import { platformBrowserDynamic } from '../node_modules/@angular/platform-browser-dynamic';

import { AppModule } from "./modules/app.module";

platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.log(err));

app.module.js:

import { BrowserModule } from '../../node_modules/@angular/platform-browser';
import { FormsModule } from '../../node_modules/@angular/forms';
import { HttpModule } from '../../node_modules/@angular/http';
import { RouterModule } from '../../node_modules/@angular/router';
import { NgModule } from '../../node_modules/@angular/core';

import { AppComponent, NwComponent, LoessComponent } from '../components';
import { routes } from '../routes';


export let AppModule = NgModule({
              imports: [ BrowserModule, FormsModule, HttpModule, RouterModule.forRoot(routes) ],
              declarations: [ AppComponent, NwComponent, LoessComponent ],
              bootstrap: [ AppComponent ]
            }).Class({
              constructor() {
                console.log("Module started");
              }
            });

routes/app.routes.js:

import { provideRoutes } from '../../node_modules/@angular/router'
import { AppComponent, LoessComponent, NwComponent } from '../components';

export let routes = [
   { path: 'loess', component: LoessComponent },
   { path: 'nw', component: NwComponent },
   { path: '', component: AppComponent }, // default route
   { path: '**', redirectTo: '/home', pathMatch: 'full' } // 404
];

export let routesProvider = [
    provideRoutes(routes)
];

components/app/app.component.js:

import '../../../node_modules/jquery';
import { Component, Inject } from '../../../node_modules/@angular/core';
import { BootstrapLayout, sidebar } from '../../../node_modules/bootstrap-layout';
import { ROUTER_DIRECTIVES } from '../../../node_modules/@angular/router';

export let AppComponent =
        Component({
          selector: 'ml-index',
          templateUrl: '/client/js/src/components/app/app.html',
        })
        .Class({
          constructor() {
            this.title = "App Component";

            console.log("AppComponent init");
            sidebar.init('#ml-sidebar');
          }
        });

app.html:

<h1>{{title}}</h1>
<router-outlet></router-outlet>

I also use webpack@1.13.2. Here is the config file:

var webpack = require("./node_modules/webpack");
var HtmlWebpackPlugin = require("./node_modules/html-webpack-plugin")

module.exports = {
    context: __dirname,
    entry: {
        app: './src/app.js',
        vendor: './src/vendor.js'
    },
    module: {
        loaders: [
            { test: /\.js$/ , loader: 'babel-loader' },
            { test: /\.css$/, loaders: ['style-loader','css-loader','resolve-url'] },
            { test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/, loader : 'file?name=assets/[name].[hash].[ext]'},
            { test: /\.html$/, loader: 'html' },
        ]
    },
    output: {
        path: __dirname+'/bundle',
        filename: 'angular.[name].js'
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: ['app', 'vendor', 'polyfills']
        }),
        new HtmlWebpackPlugin({
            template: '../index.html'
        }),
        new webpack.ProvidePlugin({
            jQuery: 'jquery',
            $: 'jquery',
            jquery: 'jquery'
        }),
    ]
};

P.S: After providing the working solution below, another error has appeared: Uncaught (in promise): SyntaxError: Failed to execute 'add' on 'DOMTokenList': The token provided must not be empty..

Here is the stacktrace description:

ErrorHandler.handleError    @   angular.vendor.js:2723
next    @   angular.vendor.js:3586
schedulerFn @   angular.vendor.js:3341
SafeSubscriber.__tryOrUnsub @   angular.vendor.js:4971
SafeSubscriber.next @   angular.vendor.js:4926
Subscriber._next    @   angular.vendor.js:4880
Subscriber.next @   angular.vendor.js:4844
Subject.next    @   angular.vendor.js:4451
EventEmitter.emit   @   angular.vendor.js:3341
onError @   angular.vendor.js:3421
onHandleError   @   angular.vendor.js:3349
ZoneDelegate.handleError    @   angular.vendor.js:24550
Zone.runGuarded @   angular.vendor.js:24468
_loop_1 @   angular.vendor.js:24709
drainMicroTaskQueue @   angular.vendor.js:24717
ZoneTask.invoke @   angular.vendor.js:24639
2016-10-16 00:04:40.401

I solved it. Sorry, it was my fault. The error was produced by invalid syntax for routes in app.html.

Solution

It's because path '' is mapped to AppComponent.

With line

platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.log(err));

You are telling Angular to render AppComponent when app starts.
AppComponent starts and checks for the current route.
Finds '' as the current route and AppComponent to load in the '' route. So creates another AppComponent and loads it into router outlet.

Solution:

Create something like HomePageComponent and map it to '' route.