1

Bit of an odd question. I have a massive AngularJS directive that should be entirely re-written. The challenge is too great to do it all at once. I was wondering if there is a way to downgrade a route component in AngularX to load in this AngularJS directive without refactoring it yet. I cannot find any details on this.

Downgrading the angular component allows me to use something called projections which is the equivelant to AngularJS' transclusion.

I have tried many approaches, but my best shot was the following:

// component
@Component({
    selector: "some-component",
    templateUrl: "./some.component.html",
})
export class SomeComponent{}

// routes
{ path: "some-route", component: SomeComponent}

// downgrades
import { downgradeComponent } from "@angular/upgrade/static";
import {SomeComponent} from "./some-location"

angular.module("somemodule").directive(
    "someComponent",
    downgradeComponent({ component: SomeComponent })
)

So far no luck. Since the Application is pretty big. This would make perfect little commits to work towards a migrated system. If the names do not match. The application will break because it cannot find the directive name.

If the downgrade worked, one would expect angularjs components to work on the route.

Oz Lodriguez
  • 965
  • 5
  • 16

1 Answers1

0

After some more digging, this would never work. I ended up just upgrading the directive using the UpgradeComponent class: https://angular.io/api/upgrade/static/UpgradeComponent downside is that it added a lot of boilerplate by creating a wrapper.

Oz Lodriguez
  • 965
  • 5
  • 16