gund / ng-dynamic-component Goto Github PK

Hi everyone!

i'm trying to use ng-dynamic-component in my app,
I follow the instructions in github, to use it and that error show

ERROR in Error: Error encountered resolving symbol values statically. Calling function 'DynamicModule', function calls are not supported. Consider replacing the function or lambda wi th a reference to an exported function, resolving symbol GridModule in C:/src/MyApp/src/app/pages/grid/grid.module.ts, resolving symbol GridModule in C:/src/MyApp/src/app/pages/grid/grid.module.ts at syntaxError (C:\src\MyApp\node_modules\@angular\compiler\bundles\compiler.umd.js:1729:34) at simplifyInContext (C:\src\MyApp\node_modules\@angular\compiler\bundles\compiler.umd.js:24979:23) at StaticReflector.simplify (C:\src\MyApp\node_modules\@angular\compiler\bundles\compiler.umd.js:24991:13) at StaticReflector.annotations (C:\src\MyApp\node_modules\@angular\compiler\bundles\compiler.umd.js:24418:41) at _getNgModuleMetadata (C:\src\MyApp\node_modules\@angular\compiler-cli\src\ngtools_impl.js:138:31) at _extractLazyRoutesFromStaticModule (C:\src\MyApp\node_modules\@angular\compiler-cli\src\ngtools_impl.js:109:26) at includeLazyRouteAndSubRoutes (C:\src\MyApp\node_modules\@angular\compiler-cli\src\ngtools_impl.js:66:25) at Array.reduce (native) at includeLazyRouteAndSubRoutes (C:\src\MyApp\node_modules\@angular\compiler-cli\src\ngtools_impl.js:67:26) at Array.reduce (native) at Object.listLazyRoutesOfModule (C:\src\MyApp\node_modules\@angular\compiler-cli\src\ngtools_impl.js:54:36) at Function.NgTools_InternalApi_NG_2.listLazyRoutes (C:\src\MyApp\node_modules\@angular\compiler-cli\src\ngtools_api.js:91:39) at AotPlugin._getLazyRoutesFromNgtools (C:\src\MyApp\node_modules\@ngtools\webpack\src\plugin.js:207:44) at _donePromise.Promise.resolve.then.then.then.then.then (C:\src\MyApp\node_modules\@ngtools\webpack\src\plugin.js:443:24) at <anonymous> at process._tickCallback (internal/process/next_tick.js:169:7)

Angular Versions:

@angular/cli: 1.4.3
node: 8.1.2
os: win32 x64
@angular/animations: 4.4.6
@angular/cdk: 2.0.0-beta.11
@angular/common: 4.4.6
@angular/compiler: 4.4.6
@angular/core: 4.4.6
@angular/forms: 4.4.6
@angular/http: 4.4.6
@angular/material: 2.0.0-beta.11
@angular/platform-browser: 4.4.6
@angular/platform-browser-dynamic: 4.4.6
@angular/router: 4.4.6
@angular/cli: 1.4.3
@angular/compiler-cli: 4.4.6
typescript: 2.6.1

ng-dynamic-component version use : ^1.0.0

Any ideas???

Version 4.2.4 of @angular/compiler just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As @angular/compiler is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

Hello,

I used you angular 4 component and it works just fine with an angular 4 cli project . But we have an angular cli 2 application and app,module.ts throws a compile time error of 'cannot load module Dynamic Module' I am using version ^0.0.1 as per your instructions. Please let me know how to get around this..

Given

class Parent {
  inputs = {
    foo: 'foo',
  };
}

@Component()
class Child {
  @Input('foo') bar: string;
}

Expected

Child component has property bar set to 'foo'.

Actual

Child component has property foo set to 'foo'.

Scenario:

An array of mixed types representing components to render with ndc-dynamic may not contain an inputs/outputs key. As a result dynamic directive will throw TypeError: Cannot convert undefined or null to object:

let cards = [
  { 
    'component': SpadesCard,
    'inputs': { value: 'A' },
    'outputs': { onDraw: message => console.log(message)}
  },
  { 
    'component': HeartsCard,
    'inputs': { value: '2' },
    'outputs': { onDraw: message => console.log(message)}
  },
  { 
    'component': BlankCard
  },
  ...
];

// Template
<ng-container *ngFor="let card of cards">
  <ndc-dynamic [ndcDynamicComponent]="card.component"
      [ndcDynamicInputs]="card.inputs"
      [ndcDynamicOutputs]="card.outputs"
    ></ndc-dynamic>
</ng-container>

// Results in -->
// TypeError: Cannot convert undefined or null to object

Ideally the calling code doesn't need to provide an empty object to the ndcDynamic* directives. The directive code could be made robust enough to handle inputs/outputs that are not defined.

Version 4.2.4 of @angular/core just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As @angular/core is “only” a peerDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

I tried in Angular 5.0.0-rc.3 and I get an error the regarding the OpaqueToken export which is deprecated.

According to angular/angular#14427 you may just need replace these with InjectionToken instead.

How would I go about calling a function from the parent, something like this :

@Component({
    template: `<button (click)="doStuff()">Do something</button>
               <ng-container *ngComponentOutlet="dynamicComponent;
                              ndcDynamicInputs: inputs;
                              ndcDynamicOutputs: outputs"></ng-container>`
})
export class ParentComponent {
     dynamicComponent = ChildComponent1;
     inputs = {};
     outputs = {};

     doStuff = () => {
        //Do stuff

        //Call child component doStuff function
     }
}

@Component({ ... })
export class ChildComponent1{
    doStuff = () => {  ...  }
}

One workaround I can think of, would be by changing an input value, thus triggering Angular change detection and implementing ngOnChanges in the child component but I don't think it's really nice.

Any plans on supporting Rxjs 6? Atm i get errors when it tries to include "rxjs/Subject" which should be "rxjs" and rxjs/add/operator/takeUntil which should be "rxjs/operators"

Thanks for the work on resolving #69 . That seems to have solved the problem after updating to angular 5. But now when I try to build a production version of my app (with aot), I get the following error:

ERROR in Error: Error encountered resolving symbol values statically. Calling function 'DynamicModule', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol DashModule in /var/www/genesis/client/src/app/dash/dash.module.ts, resolving symbol DashModule in /var/www/genesis/client/src/app/dash/dash.module.ts

This is the line the module file that causes the error:

DynamicModule.withComponents([ DashletFavoriteComponent, DashletRecentComponent, DashletTrendingComponent ])

Am I missing something here?

"ng serve" works fine. So does "ng build" with aot false. Also the previous versions (angular 4 + ndc 1.x) used to work fine with aot enabled.

Any ideas why this won't work?

<ng-container *ngIf="item?.component; else elseBlock">
  <ng-container *ngComponentOutlet="item.component"
                [ndcDynamicInputs]="item.inputs">
  </ng-container>
</ng-container>

Works fine if I use <ndc-dynamic> and [ndcDynamicComponent]. I also tried with a div instead of ng-container, but not luck...

Hi! Everybody likes this tool so im trying to use it :)

My doubt is due to this post ( https://stackoverflow.com/a/39507831/1546652 ) i could notice how to add properties dynamically to an existing component ( via Object.assign() ) but i cant figure out how to add @Input/@output Decorators dynamically to a property. I suppose this is done via Object api.

Hi,

It's great module to use for dynamic component rendering. However facing issues in data binding. Same instance of component being render in DOM. If I am trying to insert a type of component having values inserted from response object, same values are being binded previously added dynamic component.

Is there a way to create new instance of it and then add to the DOM.

Thanks in advance

Hello
I've read the documentation but there is nothing there about getting access to the dynamic component reference...can this be done and if so how?
thanks
Ross

Hi,

I was updating the packages from my solution and when upgrading from 2.0.3 to 2.1.0 of your library, all of sudden my screen stopped working.

I had a dynamic form that receives the framework type at the creation of the module and I'm using your library to abstract the dynamic injection of the component

private _collectChangesFromDiffer(differ: any): SimpleChanges {
    const changes = {} as SimpleChanges;

    // It's breaking here! It seems like the differ is null or undefined, causing the loop to break.
    differ.forEachItem((record: KeyValueChangeRecordAny) =>
      changes[record.key] = new CustomSimpleChange(record.previousValue, record.currentValue, false));

    differ.forEachAddedItem((record: KeyValueChangeRecordAny) =>
      changes[record.key].previousValue = UNINITIALIZED);

    return this._resolveChanges(changes);
  }

before (v.2.0.3) :

    if (inputsChanges) {
      const isNotFirstChange = !!this._lastInputChanges;
      this._lastInputChanges = this._collectChangesFromDiffer(inputsChanges);

      if (isNotFirstChange) {
        this.updateInputs();
      }
    }

Current:

    if (inputsChanges) {
      const isNotFirstChange = !!this._lastInputChanges;
      this._updateInputChanges(inputsChanges);

      if (isNotFirstChange) {
        this.updateInputs();
      }
    }

Can you please have a look? It seems the caller of this function changed and something within the new routine is not happy. Possibly due to the fact the _collectChangesFromDiffer() is called twice. One within the ngOnChanges and then on ngOnCheck.

Can this be used with a component that has ngModel 2 way binding? It doesn't seem to work when ngModel is added to the inputs and outputs or when ngModel is added to the inputs and ngModelChange is added to the outputs.

Plnkr example:
http://plnkr.co/edit/DY4delkqeGyl3ElnsRJs?p=preview

Version 4.2.4 of @angular/compiler-cli just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As @angular/compiler-cli is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

According to the Angular Package Format V4:

• Replace current module with Flat ESM ES5
• Create new Flat ESM ES2015

Is it possible to use ngModel together with the component provided by this module? Or is it only inputs/ouputs at the moment?

Version 2.4.11 of uglifyjs just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As uglifyjs is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

Hi,
Your offering is very interesting. I am just trying to use it. I came upon the following issue as explained below:

I have the following component I would like to dynamically insert in my SPA - LumpCompnent - that has the following declartive definition:

<epimss-lump #lumpCmpRef></epimss-lump>

How do I insert the angular4 id #lumpCmpRef dynamically using ng-dynamic-component?

Thanks

Say you had a select. And onChange you call a function that will update the referenced component.
So, depending on the selection you want to load one component or another.

Is this possible? Some workaround? tried to assign something else to my variable currentForm but didn't work.

<ndc-dynamic [ndcDynamicComponent]="currentForm"></ndc-dynamic>

Version 5.3.0 of tslint just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As tslint is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

Version 4.2.5 of @angular/compiler-cli just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As @angular/compiler-cli is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

Is it possible to register this component in system.config.js ? And what is tslib and how to get it?

I am trying to loop like following code but the order of sections is not retained if same component type is used. Components with similar type all gets added at the end.

<div data-paroller-factor="0.3" *ngFor="let section of sections; let i = index"> <ndc-dynamic [ndcDynamicComponent]="section.component" [ndcDynamicInputs]="section.componentData"></ndc-dynamic> </div>

As the subject reads; does this module support AoT compilation?

Hi Alex !

Today I'm wondering how the destruction of the dynamic components are handled; so I know when ngOnDestroy will be called.
More than that, I would need a way to be able to force the destruction of a dynamic component: I have a panel in which I inject a component dynamically via your tool, and then I hide the panel from the interface, but what I would actually need is to effectively destroy the dynamic component (I want to keep the panel alive).

Thank you!

Version 4.2.2 of @angular/core just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As @angular/core is “only” a peerDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

Version 4.2.3 of @angular/compiler just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As @angular/compiler is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

I have been trying to pass on the common instances of the AppModule Providers inside ndc-dynamic but unsuccessful so far. Here are the things I have tried

(1) without [ndcDynamicProviders], it seems the components are getting 'undefined' object instances of the services

(2) with [ndcDynamicProviders], it seems new object instances of the services getting created, which are different to the object instances available via components constructors under AppModule.

What I require is the exact object instances that are available inside AppModule.

Some help would be really appreciated.

Version 4.1.2 of @angular/compiler just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As @angular/compiler is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

Version 4.2.5 of @angular/compiler just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As @angular/compiler is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

Hiya! Quick questions, the documentation only shows how to set inputs/outputs, but not how to use them on the dynamically rendered component. For example given the following component:

@Component({
  selector: 'my-component',
  template: `<ndc-dynamic [ndcDynamicComponent]="component"
                          [ndcDynamicInputs]="inputs"
                          [ndcDynamicOutputs]="outputs"
                          ></ndc-dynamic>`
})
class MyComponent {
  component = MyDynamicComponent1;
  inputs = {
    hello: 'world',
    something: () => 'can be really complex'
  };
  outputs = {
    onSomething: (type) => alert(type)
  }
}

How would I access the input values from within MyDynamicComponent1? Or am I misunderstanding the purpose of the inputs/outputs?

@Component({
  selector: 'my-dynamic-component1',
  template: `<div>Hello, {{inputs.hello}}!</div>`
})
class MyDynamicComponent1 {
 // How can I get a hold of the inputs passed from "my-component"? For example, I'd like to access the "inputs.hello".
...
}

Hi @gund,
Quick question...
DO you actually use tslib in your library?? You added as dependency and I just noticed a warning about the missing dependency. However, even if I don't add the dependency, my app still works fine with your library version 2.0.3.

Is this really required?

Hi !
Inputs and outputs work great on my dynanic elements! However, I can't get to pass the content of the node to the dynamic component.

Here's my context: I've developped a TrialComponent, aimed at trying different look&feel of various component, by switching them dynamically (via a button next to the TrialComponent). The simplified structure is:

Application component offering some trial on some components

...
<comp-trial 
  [inputs]="{ title:'...' }"
  [outputs]="{ click: onClick }"
>
	This is some content for the dynamic components
</comp-trial>
...

Trial Component

@Component({
	selector: 'comp-trial',
	template: '
	  <ndc-dynamic 
		[ndcDynamicComponent]="dynamicComponent"
		[ndcDynamicInputs]="inputs"
		[ndcDynamicOutputs]="outputs"
	  >
	  </ndc-dynamic>
	'
})
export class TrialComponent {
  dynamicComponent; // the component to insert dynamically (management of this var is not developed here)
  @Input() inputs: Array<any>;
  @Input() outputs: Array<any>;
}

One of the dynamic component

@Component({
  selector: 'dyn-comp1',
  template: '
	<div>{{ title }}</div>
	<div class="content"> ...? </div>
  '
})
export class ExpandablePanel1Component extends ExpandablePanel {
   @Input() title;
   @Input() items;
   @Output() click;
}

I've tried to use ndcDynamicContent on my TrialComponent, but couldn't get to make it work.

Any advice to pass some node content to the dynamic components?

Hi,

When we change the component on the fly, the ngOnChanges of the new component is called twice, first time with the inputs we have passed to the new component ( firstChange: true and no previousValue) and a second time with in previousValue the value of the old component.
Any idea to avoid this ?

Thanks

Plnkr example to reproduce : https://plnkr.co/edit/uM7FzOmI4wNPE4F8WtFR

Version 5.3.3 of rxjs just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As rxjs is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

Please take a look at this example

AppComponent dinamically insert InputComponent, each InputComponent dinamically insert LabelComponent (before the input), SvuotaComponent (just a button immediately after the input field, that empty the input) and ErrorComponent (after the button).

Buttons are disabled until input fields are empty. While inputs are empty if you press tab focus works as expected, button are skipped and focus jump to the next input.

If you fill an input field and the focus is on the input filled, you need to press tab two times in order to focus on button, and, even stranger, you need to click two times on button for the click event to be managed.

If I 'statically' put a button after input tab and click work as expected.

Is there an example for usages of this module within an *ngFor?

For example:

        <ng-container *ngFor="let obj of parent.controls[objectType].controls; let i=index" [formGroupName]="i">
            <ndc-dynamic [ndcDynamicComponent]="objectComponentType" [object]="obj" [parent]="parent" (remove)="removeRow(i)"></ndc-dynamic>
        </ng-container>

Apparently the inputs are undefined with this syntax.

`<div *ngComponentOutlet="component"
                   [ndcDynamicInputs]="inputs"
                   [ndcDynamicOutputs]="outputs"
                   ></div>`

But It's working with <ndc-dynamic>

Lifecycle hooks run even if they do not exist on instantiated dynamic component causing TypeError.

Should be checked if particular function exists before calling.

Hi,

I was wondering if you could provide an example of how to use ndcDynamicProviders to add extra providers to the dynamic loading. I'm trying to load a component which requires a service but I get an error "Can't resolve all parameters for TabComponent: (?)". The service is local to the module that TabComponent is defined in (and the dynamic host resides in the same module) and, if I statically load the component then it works fine.

I'm assuming ndcDynamicProviders should be an array of service type names or something?

Cheers,
Chris

I've been using your library for a little while now to great effect however when I try to compile my Angular application using AoT I get Error encountered resolving symbol values statically. Calling function 'DynamicModule', function calls are not supported. I see that your library does produce the expected .metadata.json files so I'm not sure what's wrong. I have tried using the standard angular-cli seed application for testing and still see the issue.

If AoT support is not working or not planned It might be nice to put a note about that on the readme.

Hello,
your Package looks promising, but I cannot get it to work.
When I use this package with the current angular version (either 4.0.0 or 4.0.1), I get the following error message:

ERROR in ./~/ng-dynamic-component/dist/dynamic/custom-simple-change.js
Module not found: Error: Can't resolve 'tslib' in '/home/vagrant/component-test/node_modules/ng-dynamic-component/dist/dynamic'
 @ ./~/ng-dynamic-component/dist/dynamic/custom-simple-change.js 1:0-33
 @ ./~/ng-dynamic-component/dist/dynamic/dynamic.directive.js
 @ ./~/ng-dynamic-component/dist/dynamic/index.js
 @ ./~/ng-dynamic-component/dist/index.js
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts

Steps to reproduce using Angular CLI:

1. ng new component-test
2. cd component-test
3. npm install --save ng-dynamic-component
4. In src/app/app.module.ts add import-statement (import { DynamicModule } from 'ng-dynamic-component';) and module in imports-array.
5. ng serve

Cheers

Version 4.1.3 of @angular/compiler just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As @angular/compiler is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

Hi,

I'm trying to use this but I get the following error
Uncaught (in promise): Error: Template parse errors: Can't bind to 'ndcDynamicComponent' since it isn't a known property of 'ndc-dynamic'.

I've imported this in app.module.ts along with components I'd like to use.
DynamicModule.withComponents([DateAnswerComponent,TextAnswerComponent]).

I'm using it with ionic 3 if that matters.

could anybody help me with this?

many thanks

Version 4.2.2 of @angular/compiler-cli just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As @angular/compiler-cli is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴