Make first tab active by default

Question

I am using the following html snippet.

1.) How i can make the general tab active by default. I tried to add active class but than somehow the first one is only active every time.

2.) Once i click the tabs and if i reload the page I get the following error and the whole page seems to break. the url falls back to base url

EXCEPTION: Uncaught (in promise): Error: Cannot find primary outlet to load 'DataConfigurationGeneralDetailComponent'
Error: Cannot find primary outlet to load 'DataConfigurationGeneralDetailComponent'

HTML

       <ul class="nav nav-tabs" role="tablist">
            <li class="nav-item"><a class="nav-link"
                data-toggle="tab"
                [routerLink]="['general']" [routerLinkActive]="['active']"
                role="tab" dpTranslate="dataconfiguration.tabs.general">General</a></li>
            <li class="nav-item"><a class="nav-link" data-toggle="tab"
                [routerLink]="['mapping']" [routerLinkActive]="['active']"
                dpTranslate="dataconfiguration.tabs.mappings">Mappings</a></li>
            <li class="nav-item"><a class="nav-link" data-toggle="tab"
                [routerLink]="['target']" [routerLinkActive]="['active']"
                dpTranslate="dataconfiguration.tabs.target">Target</a></li>
        </ul>
        <!-- Tab panes -->
        <div class="tab-content">
           <router-outlet></router-outlet>
        </div>

ROUTES

export const tenantRoute: Route[] = [
    {
        path: 'tenant',
        component: TenantComponent,
        data: {
            authorities: ['ROLE_USER'],
            pageTitle: 'tenant.home.title'
        },
        children: [
            {
                path: ':id',
                component: TenantDetailComponent,
                data: {
                    authorities: ['ROLE_USER'],
                    pageTitle: 'tenant.home.title'
                },

            },
            {
                path: ':id/dataconfiguration/:id',
                component: DataConfigurationDetailComponent,
                data: {
                    authorities: ['ROLE_USER'],
                    pageTitle: 'dataconfiguration.home.title'
                },
                children: [
                    {
                        path: 'general',
                        component: DataConfigurationGeneralDetailComponent,
                        data: {
                            authorities: ['ROLE_USER'],
                            pageTitle: 'dataconfiguration.home.title'
                        }
                    },
                    {
                        path: 'mapping',
                        component: DataConfigurationMappingDetailComponent,
                        data: {
                            authorities: ['ROLE_USER'],
                            pageTitle: 'dataconfiguration.home.title'
                        }
                    },
                    {
                        path: 'target',
                        component: DataConfigurationTargetDetailComponent,
                        data: {
                            authorities: ['ROLE_USER'],
                            pageTitle: 'dataconfiguration.home.title'
                        }
                    }
                ]
            }
        ]
    }
];

Answer 1

UPDATE: updated with routes example to address comment on answer.

To answer your first question, to make the general tab always the default tab, you would set the 'catch all( * )' route to point to the General tab component.

See here for usage of the routerLinkActive directive: https://angular.io/docs/ts/latest/api/router/index/RouterLinkActive-directive.html

To address your second question, ensure you are using the correct imports in your app.module.ts:

import { Routes, RouterModule } from '@angular/router';

and you are using forRoot, e.g.

export const routing = RouterModule.forRoot(routesArrayGoesHere)

-- Updated content

An example of a simple routing config would be like below.

path: '' is the url when no parameters are defined, this is route you wish to utilise to load up the general tab first, so you would point this to the 'general tab' component.

The path: '**' route is technically the catch all when it cannot find a route, in this case I have this going to an error page.

const APP_ROUTES: Routes = [ { path: 'dashboard', component: DashboardComponent }, { path: '', component: DashboardComponent }, { path: '**', component: PageNotFoundComponent } ]

You've made your routing more complex by nesting children in it. I would suggest getting your routing working with flat paths first, then experiment later. ie. One thing to note, I've used Routes, instead of Route[] (probably the same thing, but something to try changing if still having issues).

export const tenantRoute: Route[] = [ { path: 'tenant', component: TenantComponent, data: { authorities: ['ROLE_USER'], pageTitle: 'tenant.home.title' }, }, { path: 'tenant:id', component: TenantDetailComponent, data: { authorities: ['ROLE_USER'], pageTitle: 'tenant.home.title' }, }, { path: 'tenant:id/dataconfiguration/:id', component: DataConfigurationDetailComponent, data: { authorities: ['ROLE_USER'], pageTitle: 'dataconfiguration.home.title' } }, { path: 'tenant:id/dataconfiguration/:id/general', component: DataConfigurationGeneralDetailComponent, data: { authorities: ['ROLE_USER'], pageTitle: 'dataconfiguration.home.title' } }, { path: 'tenant:id/dataconfiguration/:id/mapping', component: DataConfigurationMappingDetailComponent, data: { authorities: ['ROLE_USER'], pageTitle: 'dataconfiguration.home.title' } }, { path: 'tenant:id/dataconfiguration/:id/target', component: DataConfigurationTargetDetailComponent, data: { authorities: ['ROLE_USER'], pageTitle: 'dataconfiguration.home.title' } } ];