Búsqueda de sitios web

angularjs - La actualización de Angular 2 upgradeNg1Component no funciona - proveedor desconocido


Estoy intentando crear una aplicación híbrida simple de Angular 1 + 2 en TypeScript usando el patrón de directiva de componente como se describe aquí: https://angular.io/docs/ts/latest/guide/upgrade.html#!#using-angular-1-component-directives-from-angular-2-code

Lo hice funcionar con la declaración de directiva regular, pero no puedo hacer que funcione con la directiva de componente.

Solo para contextualizar: en realidad estoy creando una nueva aplicación Angular 2, pero necesito un componente que aún no ha sido convertido, llamado Formly, así que estoy pensando en usar la versión Angular 1 mientras tanto.

El código completo está aquí: https://plnkr.co/edit/J5rK48?p=preview

Creé una directiva de componente siguiendo el ejemplo heroDetail en la guía:

export const tstv1 = {
  template: `<a>Angular 1: {{value}}</a><br/>`,
  controller: function($scope) {
    $scope.value = 'Angular 1';
  }
};

Luego intenté usarlo actualizando el componente:

const tstv1 = upgradeAdapter.upgradeNg1Component('tstv1')

Sin embargo, esto genera un error:

[$injector:unpr] Proveedor desconocido: tstv1DirectiveProvider <- tstv1Directive http://errors.angularjs.org/1.5.0-rc.1/$injector/unpr?>p0=tstv1DirectiveProvider%20%3C-%20tstv1Directive

¿Qué estoy haciendo mal?

Además, los ejemplos no tienen una declaración de importación para la directiva del componente. ¿Debería añadirla o no? He probado ambas opciones y no funciona de ninguna manera. Si no hay una importación, ¿cómo sabría Angular de dónde obtener la directiva?

Lo intenté así:

import {tstv1} from 'src/tstv1/tstv1.component'

Como dije, lo hice funcionar usando una directiva normal:

app.directive('tstv1directive', function() {
        return {
            restrict: 'E',
            require: '?ngModel',
            template: '<a>Inside directive: {{value}}</a>',
            controller: function($scope) {
              $scope.value = "Works!"
            }
        }
    }))

y puedo actualizarlo y usarlo sin problemas:

upgradeAdapter.upgradeNg1Component('tstv1directive')

Respuesta #1

vea el que funciona: https://plnkr.co/edit/nAiqX2w4ENkYd6Z8db7M?p=preview

La forma en que 'creaste' la directiva del componente en realidad fue solo crear un objeto, tienes que registrarlo como un componente.

ver main.ts

app.component('tstv1', tstv1);

y también tienes que importar el objeto tstv1 en main.ts

Después de eso, simplemente haz una degradación como la que hiciste con la directiva regular.