angular/angular-cli

Angular cli removes standart decorators

Alekcei opened this issue · 4 comments

Angular cli removes standart decorators. That does't worked at same times AOT and Jit.
I need a having dinamic Html using inner components.
How to disable deletion standart decorators?
Please append flag to disable the deletion standard decorators

I Created dynamic Module, and using custom components in my module

import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { ControlsModule } from './controls/controls.module';

import { PetitionAggreagteModule } from './petitions/petitions.module';


import { ReflectiveInjector, ComponentFactory, Compiler } from '@angular/core';
import { JitCompilerFactory } from '@angular/compiler';
import { JitNgModule, JitComponent } from './decorators.component';
import { Routes, RouterModule } from '@angular/router';
export function createJitCompiler() {
    console.log("create jit compiller")
   return new JitCompilerFactory([{ useDebug: false, useJit: true}]).createCompiler();
}
class PetitionEdit{
    itIsMaySuperPetitionComponent = true
    selectFrom = {
      1:'value1 in dinmic petition',
      2:'value2 in dinamic petition',
      3:'value3 in dinmic petition',
      4:'value4 in dinamic petition',
      5:'value5 in dinmic petition',
      6:'value6 in dinamic petition',
      7:'value7 in dinmic petition',
      8:'value8 in dinamic petition',
      9:'value9 in dinmic petition',
      10:'value10 in dinamic petition',
      11:'value11 in dinmic petition',
      12:'value12 in dinamic petition',
      13:'value13 in dinmic petition',
      14:'value14 in dinamic petition'
    }
}
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {

    selectFrom = {1:'value1',2:'value2'}
    title = 'app';

    @ViewChild('petitionContent',  { read: ViewContainerRef })
    containerRef: ViewContainerRef;
    private innerRef: ComponentRef<any>;

    constructor(private elementRef: ElementRef,
                private resolver: ComponentFactoryResolver,
                private compiler: Compiler){
    }
    ngOnInit() {

        try {

            let petitionhtmlForm = `
                <div style="text-align:center">
                  <h1 (click)="dinamicvar=123;">
                    Thih is my dinamic component does not work. Without  ControlsModule, {{dinamicvar}}
                  </h1>
                <br/>
                <br/><br/>
                 <ui-button style="width:900px;">My button in dinamic component not working !!!!!!!!</ui-button>
                <br/><br/>
                <ui-select style="width:300px" [from]="selectFrom"></ui-select>

                <br/><br/>

                <br/><br/>
                {{dinamicValue}}
            `

            this.createDinamicPetitionComponent (petitionhtmlForm, this.innerRef, this.containerRef, this.resolver, this.compiler)

        } catch(e){
            console.error(e)
        }

    }

    createDinamicPetitionComponent(htmlForm, innerRef, containerRef, resolver, compiler ){

        if (innerRef) {
            innerRef.destroy();
        }

        @JitComponent({   //  custom append metaData
            selector: 'dinamic-petition-edit',
            template: htmlForm
        })
        class DynamicPetitionEditComponent extends PetitionEdit {}

        let metaDataModule = {
            declarations:[DynamicPetitionEditComponent],
            imports: [ BrowserModule, CommonModule, FormsModule, PetitionAggreagteModule ],
        }

        @JitNgModule(metaDataModule)
        class DynamicHtmlModule {}

        compiler.compileModuleAndAllComponentsAsync(DynamicHtmlModule)
        .then(factory => {
            const compFactory = factory.componentFactories.find(x => x.componentType === DynamicPetitionEditComponent);
            innerRef = containerRef.createComponent(compFactory)
         });

    }
}

I have problem

Can't bind to 'from' since it isn't a known property of 'ui-select'.
1. If 'ui-select' is an Angular component and it has 'from' input, then verify that it is part of this module.
2. If 'ui-select' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("king !!!!!!!!</ui-button>

@Alekcei thanks for sharing the link! I suppose we can close the CLI issue.

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.