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: ''
useAsDefault: truetopath: ''?