Nsryjdtyk

I have an angular 4 / angularJS project (it's being upgraded).

I encounter a problem with the routing.

I am using AngularJS router at the moment :

I have 2 route

 { path: '/items/:items/list/ajs', name: 'AngularJSComponent', component: 'angularJSComponent' },

 { path: '/items/:items/list/aj4', name: 'DowngradeAngular4Component', component: 'downgradeAngular4Component'}

My downgradeAngular4Component is totally empty :

Component =>

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

import { downgradeComponent } from '@angular/upgrade/static';



declare const angular: angular.IAngularStatic;



@Component({

    selector: 'angular4Component',

    templateUrl: './angular4Component.component.html',

    providers: 

})

export class Angular4Component implements OnInit {



    constructor() {}

}



angular.module('downgradeComponent').directive('downgradeAngular4Component', downgradeComponent({ component: Angular4Component }));

TEMPLATE =>

<div>HELLO WORLD</div>

When I call this component from angularJS using
$location.path("/items/itemID/list/aj4");

I do call my component, it display correctly the Hello World

But from that point, no matter which URL i put in the app or any $location.path change from any AngularJS Component nothing happen, the navbar url change but the ng-outlet is freezed with the ng4 component.

EDIT : THIS is the console in chrome, this doesn't move no matter where i go.