将 Ngx-admin 升级到 Angular 9

Question

我正在尝试将基于 ngx admin 的项目从 angular 8 升级到 9。 我遵循 angular.io 指南，也遵循指南建议的步骤：

"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"

然后我将所有星云组件升级到版本 5.0.0。然后我将 ng2-smart-table 升级到 1.6 版本并删除 ng2-completer 并安装 @akveo/ng2-completer。 （见https://github.com/akveo/ng2-smart-table/pull/1140）

现在，通过运行 ng serve 我有这些错误：

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>
         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

问题出在哪里？

非常感谢您

安德烈亚

Answer 1

NGX-Admin 框架目前与 Angular 9 不兼容。

在官方仓库的package.json可以看到只引用了angular 8：https://github.com/akveo/ngx-admin/blob/master/package.json#L35

然而，已经有升级到 angular 9 和 nebular 5 的拉取请求： https://github.com/akveo/ngx-admin/pull/5628

您可以等待合并该拉取请求，也可以尝试自己移植整个框架。

有关如何从 angular 8 升级到 9 的信息，请参考以下网址： https://update.angular.io/