Sefa Sefa - 1 year ago 106
AngularJS Question

AppComponent html loading twice at route '/'

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


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) {

bootstrap(AppComponent, [APP_ROUTER_PROVIDERS]);


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)];


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

selector: 'app-component',
templateUrl : './app/components/app/app.component.html'

export class AppComponent{


my index.html file

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

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

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


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

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

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download