Component is printed 2 times in browser

Asked

Viewed 37 times

2

Good guys, I’m developing an app with angular2 final version using routes.

I created some files and then came across a problem of routes.

My Component Home is printed 2 times in the browser.

Componente sendo impresso 2 vezes no browser

In the Firebug Console: inserir a descrição da imagem aqui

Follows code:

login ts.

// app/login/login.ts

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

@Component({
  selector: 'login',
  templateUrl: 'app/login/login.html',
  styleUrls: ['app/login/login.css']
})

export class Login { }

home html.

<h1>Angular Router</h1>
<router-outlet></router-outlet>

home ts.

// app/home/home.ts

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

@Component({
  selector: 'home',
  templateUrl: 'app/home/home.html',
  styleUrls: ['app/home/home.css']
})

export class Home { }

app.routing.ts

// app/app.routing.ts

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { Login } from './login/login';
import { Home } from './home/home';

const appRoutes: Routes = [
    { 
        path: '', 
        component: Home, 
        pathMatch: 'full' 
    },
    { 
        path: 'logar', 
        component: Login
    }
];

export const appRoutingProviders: any[] = [

];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

app.modulets.

//app/app.module.ts

import { NgModule }                      from '@angular/core';
import { BrowserModule }                 from '@angular/platform-browser';
import { routing, appRoutingProviders }  from './app.routing';
import { Login }                         from './login/login';
import { Home }                          from './home/home';
@NgModule({
  imports: [
    BrowserModule,
    routing
  ],
  declarations: [
    Home,
    Login
  ],
  providers: [
    //appRoutingProviders
  ],
  bootstrap: [ Home ]
})
export class AppModule {
}

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
browser angular typescript component router

1 answer

1

I managed to solve the problem. I removed the router-outlet tag from home.html and created an appComponent to launch the application. That’s how you solved the problem.

Browser other questions tagged browser angular typescript component router

You are not signed in. Login or sign up in order to post.