CODEWITHSUNDEEP
angularangular2-routing
Sefa
Sefa

Reputation: 8992

AppComponent html loading twice at route '/'

At route '' (home page) my AppComponent's html is loading twice.

main.ts

import { bootstrap } from '@angular/platform-browser-dynamic';
import { enableProdMode, NgModule } from '@angular/core';
import { AppComponent } from './app/components/app/app.component';
import { APP_ROUTER_PROVIDERS } from './app/components/app/app.routing';

if (true) {
  enableProdMode();
}

bootstrap(AppComponent, [APP_ROUTER_PROVIDERS]);

app.routing.ts

import { Routes, RouterModule, provideRouter } from '@angular/router';
import { AuthComponent } from "../auth/auth.component";
import { AppComponent } from "./app.component"

const appRoutes: Routes = [
  {
    path: 'auth',
    component: AuthComponent
  },
  {
    path: '',
    component: AppComponent
  }
];

export const APP_ROUTER_PROVIDERS = [provideRouter(appRoutes)];

app.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'app-component',
    templateUrl : './app/components/app/app.component.html'
})

export class AppComponent{

}

my index.html file

<!doctype html>
<html>
<head>
  <base href="/">
  <meta charset="utf-8">

  {{#unless environment.production}}
  <script src="/ember-cli-live-reload.js" type="text/javascript"></script>
  {{/unless}}
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
    <app-component>Loading</app-component>


    {{#each scripts.polyfills}}
    <script src="{{.}}"></script>
    {{/each}}
    <script>
      System.import('system-config.js').then(function () {
        System.import('main');
      }).catch(console.error.bind(console));
    </script>

</body>
</html>

if i remove route '' from routing table html is loading once but i get exception:

Uncaught (in promise): Error: Cannot match any routes: ''

Upvotes: 2

Views: 5578

Answers (1)

Terje
Terje

Reputation: 1763

You are bootstrapping AppComponent and having it as the "default" ('/') path as well. Normally the bootstrapped component contains the "master page" (a constant part of the webpage) while the paths defined in the routes go into the router outlet. So if you use a different component for bootstrapping, it should work as you expect.

Upvotes: 8

Related Questions