CODEWITHSUNDEEP
angularangular2-routingangular2-components
Sede
Sede

Reputation: 61225

Route displays a duplicate form

I started a project in angular2 but for whatever reason, my route display my component two times. Here is related code snippet.

app.routing.ts

// Some import 
import { AuthComponent } from './master/auth';

const appRoutes: Routes = [
  {
    path: 'master/registration',
    component: AuthComponent
  }
];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

app.module.ts

import { AuthComponent } from './master/auth/auth.component';

import { AppComponent } from './app.component';
import { routing } from './app.routing';

@NgModule({
  declarations: [
    // components
    AuthComponent
 ],
 providers: [
 // some providers
 ],
 imports: [
    BrowserModule,
    ReactiveFormsModule,
    routing
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

app.component.html contains <app-auth></app-auth>

auth.component.ts

import { Component, OnInit } from '@angular/core';
import * as all from './auth-utils';
@Component({
  moduleId: module.id,
  selector: 'app-auth',
  templateUrl: 'auth.component.html',
  styleUrls: ['auth.component.css']
})
export class AuthComponent implements OnInit {

  constructor() {}

  ngOnInit() {
  }

}

auth.component.html

<app-register-form [fields]="fields"></app-register-form>
<app-login-form [loginFields]="loginFields"></app-login-form>
<router-outlet></router-outlet>

What am I missing here?

Upvotes: 3

Views: 4553

Answers (2)

Kunso Solutions
Kunso Solutions

Reputation: 7630

You mentioned that you already have <app-auth> in your app.component.html, thats gives you first instance of auth component, and you have <router-outlet></router-outlet> inside of your auth.component.html that is your second instance.

Upvotes: 3

nickspoon
nickspoon

Reputation: 1397

It looks to me like you are including your AuthComponent directly in your template using its selector <app-auth></app-auth> and routing to it so it appears in your <router-outlet>. You just want to do one or the other.

Since you are trying to route to AuthComponent, remove <app-auth></app-auth> from your template. In fact, since AuthComponent is a routing target, it doesn't need a selector at all, so you may remove some confusion by deleting the line from its component annotation:

@Component({
  moduleId: module.id,
  /* selector: 'app-auth', */
  templateUrl: 'auth.component.html',
  styleUrls: ['auth.component.css']
})
export class AuthComponent...

Upvotes: 5

Related Questions