Rendering dynamic components by selector name in Ivy - Angular inDepth

post discussion
#1
1 Like
#2

Thanks for your article!

But when I applied to my project, I got error in line:

moduleFactory = await this.injector
.get(Compiler)
.compileModuleAsync(ngModuleOrNgModuleFactory);
and message: “Error: Runtime compiler is not loaded”

That seem this.injector.get(Compiler) does not work. I think I missing include compiler on build prod but I don’t know how to include it. Please help me! (I build prod with --aot=true)

Thank you!

#3

Can you confirm if you have IVY enabled and on Angular 9+ ?
Also, with AOT you shouldn’t be getting into this code as the loaded module should be of type NgModuleFactory.

#4

I just checked and that project has not enabled with ivy. Thanks for quick response!

By the way, some my library does not build with ivy right now, so I should build like traditional (not ivy enabled), but I cannot generate ngfactory file (already set skipTemplateCodegen to false). I got error “typeerror-cannot-read-property-type-of-undefined”. Do you know it?

#5

I found the reason, but I don’t know how to fix.
When set angularCompilerOptions -> skipTemplateCodegen to false, the angular cli cannot build raw typescript class (does not have any decorator for class such as @Component, @Injectable…). And it throw the error: “Cannot read property ‘type’ of null”.

#6

Hope this makes selector-based component work the main angular project.

For the Angular libraries, I haven’t used this approach. I have been using libraries with ivy disabled & NOT expanded the selector-based components approach that is part of the library to be loaded in the main project.

1 Like
#7

Thank you, I clear my mindset and now I’m using angular library architecture but ref direct from main app to library, and compile with ivy, the dynamic component work well.

1 Like