title: @angular/router not working inside an angular.js application
body: <p>I'm working on migrating little by little a big angular.js application (that uses ui-router) to angular and I opted by using the angular.js application as a base and migrate the different routes one at a time so that once I'm finished I switch everything at once to angular.</p>
  
  <p>These are the steps I've followed:</p>
  
  <p>Bootstap the angular.js application in my main.ts file:</p>
  
  <pre><code>export function bootstrapAngular(extra: StaticProvider[]): any {
    setAngularJSGlobal(angular);
    if (environment.production) {
      enableProdMode();
    }
    return platformBrowserDynamic(extra)
      .bootstrapModule(AppModule)
      .catch(err =&gt; console.log(err));
  }
  
  const downgraded = angular
    .module('downgraded', [downgradeModule(bootstrapAngular)])
    .directive('appRoot', downgradeComponent({ component: RootComponent, propagateDigest: false }))
    ;
  
  angular.bootstrap(document, ['app', downgraded.name]);
  </code></pre>
  
  <p>Inside my index.html</p>
  
  <pre><code>&lt;app id="app"&gt;&lt;/app&gt;
  </code></pre>
  
  <p>This works fine.</p>
  
  <p>Inside my main angular.js component I add the tag of my downgraded main Angular component:</p>
  
  <pre><code>&lt;div class="app__view" id="appContent"&gt;
    &lt;ui-view&gt;&lt;/ui-view&gt;
    &lt;app-root&gt;&lt;/app-root&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is how my main module is configured</p>
  
  <pre><code>const COMPONENTS = [
    TestComponent,
    RootComponent,
  ];
  
  @NgModule({
    declarations: COMPONENTS,
    imports: [
      BrowserModule,
      NxModule.forRoot(),
      RouterModule.forRoot(routes, {
        initialNavigation: 'enabled',
        useHash: true
      })
    ],
    providers: [
      { provide: APP_BASE_HREF, useValue: '/' }
    ],
    entryComponents: COMPONENTS,
    exports: COMPONENTS
  })
  export class AppModule {
    ngDoBootstrap(): void { }
  }
  </code></pre>
  
  <p>Everything works fine so far. I can see my angular component inside my angular.js application.</p>
  
  <p>The problem comes when I add the  to my main root component
  I can see the router-outlet rendering but nothin next to it, eventhough the route matches.</p>
  
  <pre><code>export const routes: Route[] = [
    { path: 'dashboard', component: TestComponent }
  ];
  </code></pre>
  
  <p>When I point my browser to <em>/#/dashboard</em> this is the router tracing that I see:</p>
  
  <p><a href="https://i.stack.imgur.com/046wG.png" rel="noreferrer"><img src="https://i.stack.imgur.com/046wG.png" alt="router tracing"></a></p>
  
  <p>And the test component just doesn't render.</p>
  
  <p><a href="https://i.stack.imgur.com/fxnY2.png" rel="noreferrer"><img src="https://i.stack.imgur.com/fxnY2.png" alt="enter image description here"></a></p>
  
  <p>I need some help, can't think of anything else to try.</p>