Ng-zorro-antd: when specific module is registered, `is not a known element` errors are occur

Created on 19 Aug 2018  ·  9Comments  ·  Source: NG-ZORRO/ng-zorro-antd

Version

1.3.0

Environment

Windows

Reproduction link

https://stackblitz.com/edit/repro-antd-specific-module-bug

Steps to reproduce

When register specific modules instead of registering NgZorroAntdModule for reduce recompile time in development.
Angular Language Service error to me that every component is not a known element.
But, build and run was fine.

What is expected?

i want to see clean editor. T_T

sample-project.zip
is_not_a_known_element
registered_module

see app.component.html

in_stack

What is actually happening?

too many warning to us.

Other?

All 9 comments

And i try to import with */public-api in specific path of modules, it's not works.

try_use_public_api

not_worked

You don't need and we don't support importing specific modules. Tree-shaking would downsize your compiled package automatically. Importing brings no advantage and only forces you to figure out how nz-zorro modules relies on each other.

Just import NgZorroAntdModule like in the documenation and you will see the result

@wendzhue Exactly, you're right when build and deploy web app for prod environment.

But, I'm talking about development time. so.. I was checking each options provide with ng serve
with --vendor-source-map false --source-map false as default


1. Import specific module

| Command | First build | After Builds | Application Time(DOM Content Loaded) | vender.js size |
|------------|------------|------------|-----------------------|-----------------|
| ng serve | 10860ms | 466ms | 2181ms | 5.72MB |
| ng serve --configuration hmr | 9951ms | 186ms | 2370ms | 5.73MB |
| ng serve --configuration hmr --optimization | 12268ms | 5537ms | 2080ms | 1.7MB | |ng serve --configuration hmr --optimization --aot | 6723ms(Fail) | - | - | - |
| ng serve --optimization | 11610ms | 5925ms | 1710ms | 1.7MB |
| ng serve --aot --optimization | 10062ms(Fail) | - | - | - |
| ng serve --aot | 6753ms(Fail) | - | - | - |

But, The more modules i import, I expect that run-time performance will be slower as below.


2. Improt NgZorroAntdModule

| Command | First build | After Builds | Application Time(DOM Content Loaded) | vender.js size |
|------------|------------|------------|-----------------------|-----------------|
| ng serve | 9917ms | 141ms | 4960ms | 5.72MB |
| ng serve --configuration hmr | 9976ms | 181ms | 4880ms | 5.73MB |
| ng serve --configuration hmr --optimization | 12341ms | 5432ms | 4760ms | 1.7MB | |ng serve --configuration hmr --optimization --aot | 7619ms(Fail) | - | - | - |
| ng serve --optimization | 11747ms | 4855ms | 4640ms | 1.7MB |
| ng serve --aot --optimization | 17690ms | (Fail) | 1290ms | 1.26MB |
| ng serve --aot | 15223ms | ERROR in ./src/app/app.module.ngfactory.js Module not found: Error: Can't resolve '@angular/router.ngfactory' in 'D:\dev\git\ci-admin\src\app'(Fail) | 1370MS | 5.86MB |


IMHO, aot flag help run-time performance with ng serve but will be after builds time so slower than without aot flag. so, it would be nice to allow specific modules in my personal hope like material 2.

Really thanks to make great components set. :)

@jinseoung-lee Development size is not worth giving consideration to, in most cases, comparing to the benefit of simple API. Do you have a specific use case of using individually imported modules?

@wendzhue Actually, I didn't care about the development bundle size. Important point for me, it takes more than 5 seconds to check every modification. How can i reduce build-run time for check? Or there are any documents i'm missing?

UPDATE

After I fix getting the error when ng serve --vendor-source-map false --source-map false --aot --hmr(this is angular@version > 6.1.1 issue, fix version to 6.1.1 to resolve https://github.com/angular/angular-cli/issues/11835), I have found a good option for shortest build-run time.

| Command | First build | After Builds | Application Time(DOM Content Loaded) | vender.js size |
| -- | -- | -- | -- | -- |
|ng serve --aot | 15223ms | 1200ms | 730MS | 5.86MB |

@wendzhue Thanks for taking care of me.

@jinseoung-lee My pleasure. Actually I learned this trick just now!

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.

Was this page helpful?
0 / 5 - 0 ratings