Menu
Below is my initial code to create dynamic module:
protected createComponentModule(componentType: any) {
@NgModule({
imports: [
ComponentModule
],
declarations: [
componentType
],
})
class RuntimeComponentModule {
}
return RuntimeComponentModule;
}
While I am going to implement AOT on below code it throw me error:
No NgModule metadata found for 'RuntimeComponentModule'
I found solution of it some Articals by change below code and my error gone away:
default class RuntimeComponentModule
{
}
But new error is raised it say:
Modifiers cannot appear here
It not allowed me to decorate @NgModule within method.
595
In computer science, ahead-of-time compilation (AOT compilation) is the act of compiling an (often) higher-level programming language into an (often) lower-level language before execution of a program, usually at build-time, to reduce the amount of work needed to be performed at run time.
The Angular ahead-of-time (AOT) compiler converts your Angular HTML and TypeScript code into efficient JavaScript code during the build phase before the browser downloads and runs that code. Compiling your application during the build process provides a faster rendering in the browser.
JIT downloads the compiler and compiles code exactly before Displaying in the browser. AOT has already complied with the code while building your application, so it doesn't have to compile at runtime. Loading in JIT is slower than the AOT because it needs to compile your application at runtime.
The ng build command with the --prod meta-flag (ng build --prod) compiles with AOT by default. Why compile with AOT? With AOT, the browser downloads a pre-compiled version of the application. The browser loads executable code so it can render the application immediately, without waiting to compile the app first.
This is the default since Angular 9. When you run the ng build (build only) or ng serve (build and serve locally) CLI commands, the type of compilation (JIT or AOT) depends on the value of the aot property in your build configuration specified in angular.json. By default, aot is set to true for new CLI applications.
The Angular AOT compiler extracts metadata to interpret the parts of the application that Angular is supposed to manage. You can specify the metadata explicitly in decorators such as @ Component () and @ Input (), or implicitly in the constructor declarations of the decorated classes.
The Angular compiler extracts the metadata once and generates a factory for TypicalComponent. When it needs to create a TypicalComponent instance, Angular calls the factory, which produces a new visual element, bound to a new instance of the component class with its injected dependency.
To speed up the program start, one can also compile the templates at build time, which is called Ahead of Time (AOT) compilation. Thanks to this, we don’t need to include the sources of the Angular Compiler into our build which reduces the parts of Angular that need to be loaded into the browser and ultimately the size of the bundle.
Using dynamic component or module creation is currently not officially supported to be used together with AoT
See the discussion at https://github.com/angular/angular/issues/11780 for possible workarounds.
86
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
