Upgrade Ngx-admin to Angular 9

Question

I'm trying to upgrade my project based on ngx admin from angular 8 to 9. I follow the angular.io guide, also I follow this step suggested by guide:

"If you are a library author and you had a method returning ModuleWithProviders (typically via a method named forRoot()), you will need to specify the generic type. Learn more angular.io"

Then I upgrade all nebular components to version 5.0.0. Then I upgrade ng2-smart-table to 1.6 version and remove ng2-completer and install @akveo/ng2-completer. (see https://github.com/akveo/ng2-smart-table/pull/1140 )

Now, by running ng serve I have these errors:

ERROR in src/app/pages/pages.module.ts:22:12 - error NG1010: Value at position 4 in the NgModule.imports of PagesModule is not a reference: [object Object] 

 22   imports: [
               ~
 23     PagesRoutingModule,
    ~~~~~~~~~~~~~~~~~~~~~~~
...
 27     AuthModule.forRoot(),
    ~~~~~~~~~~~~~~~~~~~~~~~~~
 28   ],
    ~~~
src/app/app.module.ts:39:12 - error NG1010: Value at position 4 in the NgModule.imports of AppModule is not a reference: [object Object]

 39   imports: [
               ~
 40     BrowserModule,
    ~~~~~~~~~~~~~~~~~~
...
 57     CoreModule.forRoot(),
    ~~~~~~~~~~~~~~~~~~~~~~~~~
 58   ],
    ~~~
src/app/app.component.ts:13:14 - error NG8001: 'router-outlet' is not a known element:
1. If 'router-outlet' is an Angular component, then verify that it is part of this module.
2. If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

13   template: '<router-outlet></router-outlet>',
                ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
src/app/pages/pages.component.ts:18:5 - error NG8001: 'ngx-one-column-layout' is not a known element:
1. If 'ngx-one-column-layout' is an Angular component, then verify that it is part of this module.
2. If 'ngx-one-column-layout' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.   

18     <ngx-one-column-layout>
       ~~~~~~~~~~~~~~~~~~~~~~~
src/app/pages/pages.component.tsm:19:7 - error NG8001: 'nb-menu' is not a known element:
1. If 'nb-menu' is an Angular component, then verify that it is part of this module.
2. If 'nb-menu' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

19       <nb-menu [items]="menu"></nb-menu>
         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
src/app/pages/pages.component.ts:19:16 - error NG8002: Can't bind to 'items' since it isn't a known property of 'nb-menu'.
1. If 'nb-menu' is an Angular component and it has 'items' input, then verify that it is part of this module.
2. If 'nb-menu' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

19       <nb-menu [items]="menu"></nb-menu>
                  ~~~~~~~~~~~~~~
src/app/pages/pages.component.ts:20:7 - error NG8001: 'router-outlet' is not a known element:
2. If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

20       <router-outlet></router-outlet>
         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Where is the problem?

Thank you very much in advance

Andrea

Answer 1

The NGX-Admin Framework is currently not compatible with angular 9.

In the package.json of the official repository you can see that only angular 8 is referenced:https://github.com/akveo/ngx-admin/blob/master/package.json#L35

There is however already a pull request for an upgrade to angular 9 and nebular 5 going on: https://github.com/akveo/ngx-admin/pull/5628

You can either wait for that pull request to be merged, or try porting the whole framework yourself.

For information on how to upgrade from angular 8 to 9, reference the following url: https://update.angular.io/