Sefa Sefa - 10 months ago 63
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: ''


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.