Ng-Zorro components and Ionic 5.x

Ionic Framework
1

Hey folks,

does anyone have an idea how to integrate https://github.com/NG-ZORRO/ng-zorro-antd into an Ionic 5 application?

I need some components that Ionic does not provide with this features.

Thanks in advance,
Oliver

2

First: What so you mean with Ionic 5? The latest Ionic/Angular Version is 4.11.7.

But no matter: The Ng-Zorro Components are for Angular so should be able to integrate it out of the Box, exactly as explained on their Page. Just make sure you fit their Environment Support.

So it must work like this:

npm install ng-zorro-antd

Import the Module in your app.module.ts:

import { NzButtonModule } from 'ng-zorro-antd/button';

@NgModule({
  imports: [ NzButtonModule ]
})
export class AppModule {
}
3

@EinfachHans

Thanks for your quick response. I’m currently using Ionic 5.0.0-beta.2 and for me there are issues with the styles. It loads, but it doesn’t look like it should be - according to the samples on their webpage. How for example can I use the menu component? I probably have to include/import more than only one component, right?

Thanks in advance,
Oliver

4

First: I would never use a beta Version for an App, that maybe should go live in Stores.

But apart from this: Have you add this to your angular.json?

{
  "assets": [
+   {
+     "glob": "**/*",
+     "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
+     "output": "/assets/"
+   }
  ],
  "styles": [
+   "node_modules/ng-zorro-antd/ng-zorro-antd.min.css"
  ]
}
5

I actually build an admin interface with the new Beta - the app itself is coded in V4 so far. …and no, I forgot about this. Let me check this. I will keep you up to date.

Thanks!

6

Did you solved this? I’ve added by cli but i get the erros

is not a known element:

7

I managed to make it work, but I had to change also stuff on other places. Need a sample? Gotta take a look, if I still have it saved somewhere. I was just playing around with it.