Estoy usando Angular 2 RC3. Principalmente estoy siguiendo la documentación aquí:https://angular.io/docs/ts/latest/guide/forms.html. Cuando llego a "Enviar el formulario con ngSubmit" las cosas empiezan a ir mal. Si agrego

<form (ngSubmit)="onSubmit()" #heroForm="ngForm">

Yo obtengo:

EXCEPTION: Error: Uncaught (in promise): Template parse errors:
Reference "#heroForm" is defined several times.  

Si elimino el atributo #heroForm y agrego:

<button type="submit" class="btn btn-default" ...

Entonces onSubmit () se llama varias veces. No hay múltiples entradas para el formulario en el dom. ¿Por qué la aparente duplicación, qué está pasando?

Aquí hay un componente muy simplificado que obtiene el error "se define varias veces":

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

@Component({
    template: '<form #heroForm="ngForm"></form>'
})
export class Server {
}

Este componente se carga a través de

<router-outlet></router-outlet> 

y una entrada en un archivo app.routes.ts. Estoy usando Router versión 3.0.0-alpha.7.

Solución

Estaba usando tanto los enfoques antiguos como los nuevos por accidente. Mi archivo main.ts estaba haciendobootstrap(AppComponent, [provideForms()]) ... en otras palabras, olvidé agregardisableDeprecatedForms(). Debería haber sidobootstrap(AppComponent, [ disableDeprecatedForms(), provideForms() ])