Giters

lacolaco / ng-dynamic

dynamic contents projection in Angular

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Angular 4.0.3

lilletech opened this issue · comments

commented

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 { }
commented

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.

commented

@laco0416 any progress? thanks.

commented

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

commented

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

commented

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

commented

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...

commented

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/

commented

@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.

commented

@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.

commented

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