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.
