Angular 6 hybrid app does not load AngularJS components

Question

I aim to upgrade a large AngularJS version 1.7.3 to a hybrid app using Angular 6. I finished the preparation phase where I had to convert all my controllers/directives into an AngularJS component. I have created a new Angular 6 project skeleton with the command line:

 ng new hybrid-app

I copy-pasted the AngularJS legacy code inside the Angular 6 app in src/ng1 folder.

This is how my app.module.ts look like in order to bootstrap the AngularJS 1.x app from Angular 6:

 import {BrowserModule} from '@angular/platform-browser';
 import {NgModule} from '@angular/core';
 import {UpgradeModule} from '@angular/upgrade/static';
 import {AppComponent} from './app.component';

 @NgModule({
   declarations: [
    AppComponent
   ],
 imports: [
  BrowserModule,
  UpgradeModule
 ],
 providers: [],
  // bootstrap: [AppComponent] // No Bootstrap-Component
})
 export class AppModule {
   constructor(private upgrade: UpgradeModule) {
 }

 ngDoBootstrap() {
  this.upgrade.bootstrap(document.body, ['myAngularJsModule'], {strictDi: 
   true});
 }
}

When I do ng serve, there is no error and I can see the Angular 6 app redirecting to the default AngularJS routing which is /login. This is my AngularJS route file:

 angular.module('myAngularJsModule').config(["$locationProvider", function ($locationProvider) {
    $locationProvider.html5Mode(false);
}])
.config(
    ['$stateProvider', '$urlRouterProvider', '$locationProvider',
        function ($stateProvider, $urlRouterProvider) {

            /**
             * Default route.
             */
            $urlRouterProvider.otherwise('/login');

            $stateProvider
                .state('login', {
                    url: '/login',
                    params: {message: null},
                    component: 'loginComponent',
                    template: '<login-component></login-component>'
                });

As you can see I have a default route to /login and the Angular 6 app knows how to get there. The issue that I have now is:

There is no error in the console but I have a blank page, it seems like component from AngularJS is not loaded properly and therefore does not show anything on the browser. I tried to replace the template by a simple:

 template: '<h1>Hello World!<h1>'

And it will show up properly. Anyone knows why my AngularJS component is not loaded by Angular 6, is it something to do with the UIRouter?

The error that I have now is:

 Error: StaticInjectorError(AppModule)[UpgradeModule -> Injector]: 
 StaticInjectorError(Platform: core)[UpgradeModule -> Injector]: 
NullInjectorError: No provider for Injector!
at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:1062)
at resolveToken (core.js:1300)
at tryResolveToken (core.js:1244)
at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1141)
at resolveToken (core.js:1300)
at tryResolveToken (core.js:1244)
at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1141)
at resolveNgModuleDep (core.js:8376)
at _createClass (core.js:8423)
at _createProviderInstance (core.js:8393)

Answer 1

I may need to have a look at this: https://github.com/ui-router/angular-hybrid

I will delete my old angular-ui-router and replace it by this one.