Búsqueda de sitios web

angular - Angular2 - No hay proveedor para TemplateRef (ng2-bootstrap)

He estado intentando varias soluciones para este error, pero no encontré ninguna manera exitosa de resolver esto: ¡No hay proveedor para TemplateRef!

Registro de errores:

EXCEPCIÓN: No capturado (en promesa): Error: Error en ./FooterComponent clase FooterComponent - plantilla en línea:15:20 causado por: ¡No hay proveedor para TemplateRef! Error: Error en ./FooterComponent clase FooterComponent - plantilla en línea:15:20 causado por: ¡No hay proveedor para TemplateRef!

Rechazo de Promesa no manejado: Error en ./FooterComponent clase FooterComponent - plantilla en línea:15:20 causado por: ¡No hay proveedor para TemplateRef! ; Zona: angular ; Tarea: Promise.then ; Valor:

footer.component.ts

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

@Component({
  selector: 'sa-footer',
  templateUrl: './footer.component.html'
})
export class FooterComponent implements OnInit {

  constructor() {}

  ngOnInit() {}

}

footer.component.html

<div class="page-footer">
    <div class="row">
        <div class="col-xs-12 col-sm-6">
            <span class="txt-color-white">myAPP © 2016</span>
        </div>

        <div class="col-xs-6 col-sm-6 text-right hidden-xs">
            <div class="txt-color-white inline-block">
                <i class="txt-color-blueLight hidden-mobile">Last account activity <i class="fa fa-clock-o"></i>
                    <strong>52 mins ago &nbsp;</strong> </i>

                <div class="btn-group dropup" dropdown>
                    <button class="btn btn-xs dropdown-toggle bg-color-blue txt-color-white" dropdownToggle>
                        <i class="fa fa-link"></i> <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu pull-right text-left" dropdownMenu>
                        <li>
                            <div class="padding-5">
                                <p class="txt-color-darken font-sm no-margin">Download Progress</p>

                                <div class="progress progress-micro no-margin">
                                    <div class="progress-bar progress-bar-success" style="width: 50%;"></div>
                                </div>
                            </div>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <div class="padding-5">
                                <p class="txt-color-darken font-sm no-margin">Server Load</p>

                                <div class="progress progress-micro no-margin">
                                    <div class="progress-bar progress-bar-success" style="width: 20%;"></div>
                                </div>
                            </div>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <div class="padding-5">
                                <p class="txt-color-darken font-sm no-margin">Memory Load <span class="text-danger">*critical*</span>
                                </p>

                                <div class="progress progress-micro no-margin">
                                    <div class="progress-bar progress-bar-danger" style="width: 70%;"></div>
                                </div>
                            </div>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <div class="padding-5">
                                <button class="btn btn-block btn-default">refresh</button>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

Intenté hacer lo siguiente:

  1. Investigación: Pero solo encontré respuestas/soluciones para plantillas que realmente contienen algunas directivas como ngIf, ngSwitch, etc. (Olvidando el *, por ejemplo)

  2. Agrega TemplateRef a providers. Esto es lo que obtengo:

El argumento de tipo '{ selector: string; templateUrl: string; providers: typeof TemplateRef[]; }' no se puede asignar al parámetro de tipo 'Component'. Los tipos de la propiedad 'providers' son incompatibles. El tipo 'typeof TemplateRef[]' no se puede asignar al tipo 'Provider[]'. El tipo 'typeof TemplateRef' no se puede asignar al tipo 'Provider'. El tipo 'typeof TemplateRef' no se puede asignar al tipo 'FactoryProvider'. Falta la propiedad 'provide' en el tipo 'typeof TemplateRef'.

Intentaré ver cómo agregar de alguna manera TemplateRef a los providers del módulo de la aplicación. Pero no sé si esta es la solución. Espero que alguien salga con una solución mientras yo sigo investigando.

¡Gracias! :D

Respuesta #1

Investigación: Pero solo encontré respuestas/soluciones para plantillas que realmente contienen algunas directivas como ngIf, ngSwitch, etc. (Olvidando el *, por ejemplo)

falta * aquí :

<ul class="dropdown-menu pull-right text-left" dropdownMenu>

debería ser

<ul class="dropdown-menu pull-right text-left" *dropdownMenu>

De ng2-bootstrap:

<div class="btn-group" dropdown>
  <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">
    Button dropdown <span class="caret"></span>
  </button>
  <ul *dropdownMenu class="dropdown-menu" role="menu">
    <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>
    <li class="divider dropdown-divider"></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a>
    </li>
  </ul>
</div>

Artículos relacionados