Angular 4.0.3

[lilletech]

Hello, I'm using the DynamicComponentModule It works fine in dev mode but it doesn't work in prod mode (--prod).

I get the error in the browser console :

ERROR Error: Unexpected value 't' imported by the module 't'. Please add a @NgModule annotation.

Here is how i bootstrap the app: (i'm using compiler providers)

...
import { COMPILER_PROVIDERS } from '@angular/compiler';
 platformBrowserDynamic([...COMPILER_PROVIDERS]).bootstrapModule(AppModule)
...

I have a module that contains some components

import { FormTextAreaComponent } from './form-text-area/form-text-area.component';
import { FormSuggestComponent } from './form-suggest/form-suggest.component';
import { FormSelectComponent } from './form-select/form-select.component';
import { FormRadioGroupComponent } from './form-radio-group/form-radio-group.component';
import { FormInputComponent } from './form-input/form-input.component';
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';

@NgModule({
    imports: [
        CommonModule,
    ],
    declarations: [
        FormInputComponent, FormRadioGroupComponent, FormSelectComponent, FormSuggestComponent, FormTextAreaComponent
    ],
    exports: [
        FormInputComponent, FormRadioGroupComponent, FormSelectComponent, FormSuggestComponent, FormTextAreaComponent
    ]
})
export class FormItemRendererModule { }

And i'm using it in another module

@NgModule({
  imports: [
    HttpModule,
    CommonModule,
    FormEngineComponentRoutingModule,
    FormItemRendererModule,
    DynamicComponentModule.forRoot({
      imports: [FormItemRendererModule]
    })
  ],
  declarations: [TemplateEngineComponent, FormEngineComponent],
})
export class FormEngineModule { }

[lacolaco]

Thank you for reporting. unfortunately, I have the same situation, too. I tried to use DynamicComponentModule w/ Angular CLI, but I can't enable --prod yet. #17 In AoT compilation phase of Angular-CLI, something happens. I'm looking for a solution.

[guzuomuse]

@laco0416 any progress? thanks.

[piotrn1]

Try using --no-aot flag for production: ng build --prod --no-aot

[lilletech]

With --no-aot, it works but not a real solution.

[douglasward]

@laco0416 any progress on this yet? Thanks in advance!

[lacolaco]

I'm sorry. I don't have any ideas. Since 4.0, Angular compiler has killed co-existence of AoT compilation and JiT compilation. To use JitCompiler, we have to remove --aot flag. If someone has a good solution, please let me know it...

[douglasward]

@laco0416 does this article help with this at all? https://hackernoon.com/here-is-what-you-need-to-know-about-dynamic-components-in-angular-ac1e96167f9e#3c5c

[gergelybodor]

Hey, guys! I was able to use DynamicComponentModule with aot build. I don't know if i am missing something, but it went without any complications. I made a repo, check it out. https://github.com/bgolyoo/test-dynamic-html

I also deployed to github, built with ng build --prod --aot. https://bgolyoo.github.io/test-dynamic-html/

[maychan111]

@bgolyoo Your project imports CommonModule in DynamicComponentModule.forRoot(). What if it imports a custom module that implements some components needed by the dynamic HTML? In my case, that's when the AOT build fails at runtime with the following error message:

@angular/cli": "1.1.3

vendor.737d505….bundle.js:8 ERROR Error: Unexpected value '[object Object]' imported by the module 'n'. Please add a @NgModule annotation.
    at g (vendor.737d505….bundle.js:859)
    at vendor.737d505….bundle.js:983
    at Array.forEach (<anonymous>)
    at t.getNgModuleMetadata (vendor.737d505….bundle.js:983)
    at t.getNgModuleSummary (vendor.737d505….bundle.js:983)
    at vendor.737d505….bundle.js:983
    at Array.forEach (<anonymous>)
    at t.getNgModuleMetadata (vendor.737d505….bundle.js:983)
    at t._loadModules (vendor.737d505….bundle.js:1004)
    at t._compileModuleAndAllComponents (vendor.737d505….bundle.js:1004)

When I modified my project to import CommonModule instead of the custom module, the AOT build works and no run-time error either, but obviously none of my custom components render in that case.

[gergelybodor]

@maychan111 Yes, you are right! Upon further inspection I noticed it too. But in simple cases such as I included, it still works with aot.

[skuby2]

@maychan111 It sounds like we have the same situation. This would be amazing to find a fix for.

[gofreddo]

https://stackoverflow.com/questions/45788613/angular-4-container-element-with-dynamic-content-aot-friendly