Getting error str.replace is not a function

[AMIT KUMAR JHA]

I am trying to use splitter in angular 7 project. But as soon I put the #content in ng-template then I get error saying  str.replace is not a function

This is what I did:

1. npm install @syncfusion/ej2-angular-layouts --save

2. In my module I have added the SplitterModule

3. Then using as

<div id='load-content-container'>

<ejs-splitter #horizontal height = '200px' width='1100px'>

<e-panes>

<e-pane size='40%'>

<ng-template #content>

<div>ssssqq</div>

</ng-template>

</e-pane>

<e-pane size='60%'>

<ng-template #content>

<div>ssssq</div>

</ng-template>

</e-pane>

</e-panes>

</ejs-splitter>

</div>

below is the error I am getting:

These are the packages I am using :

    "@syncfusion/ej2-angular-charts": "^16.4.48",

    "@syncfusion/ej2-angular-layouts": "^16.4.54",

    "@syncfusion/ej2-angular-navigations": "^16.4.47",

    "@syncfusion/ej2-angular-popups": "^16.4.47",

    "@syncfusion/ej2-base": "^16.4.47",

core.js:15714 ERROR TypeError: str.replace is not a function

    at evalExp (template.js:65)

    at compile (template.js:52)

    at Object.push../node_modules/@syncfusion/ej2-layouts/node_modules/@syncfusion/ej2-base/src/template-engine.js.Engine.compile (template-engine.js:57)

    at compile (template-engine.js:16)

    at SplitterComponent.push../node_modules/@syncfusion/ej2-layouts/src/splitter/splitter.js.Splitter.setTemplate (splitter.js:915)

    at SplitterComponent.push../node_modules/@syncfusion/ej2-layouts/src/splitter/splitter.js.Splitter.createSplitPane (splitter.js:951)

    at SplitterComponent.push../node_modules/@syncfusion/ej2-layouts/src/splitter/splitter.js.Splitter.render (splitter.js:215)

    at SplitterComponent.push../node_modules/@syncfusion/ej2-layouts/node_modules/@syncfusion/ej2-base/src/component.js.Component.appendTo (component.js:130)

    at component-base.js:100

    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)

[AMIT KUMAR JHA]

below issue got resolved by downgrading the version.

How can we create nested splitters without writing html code in component.ts(https://ej2.syncfusion.com/angular/documentation/splitter/getting-started/#nested-splitter)

I saw the given example but I dont want to mix my html in typescript file.

[Christopher Issac Sunder K]

Hi Amit, 

Thanks for contacting Syncfusion support. 

We are glad to hear that the script error has resolved. Our splitter component pane `content` property currently have support for string values, so you can pass outerHTML of the target element by accessing DOM like as below code and place your HTML codes into component html file.  

   

paneSettings: [  

  { size: '40%', min: '30px', content: document.querySelector('#pane1').outerHTML }  

]  

   

We have prepared sample for above scenario, check this stackblitz link:  

https://stackblitz.com/edit/angular-t2gmaq?file=default.component.ts 

Please let us know if you require any further assistance. 

Thanks, 

Christo 

[Alain dEspaignet]

I got the same error

str.replace is not a function

This splitter is very poor if it does not support content projection.

I tried all the <ng-template> examples. It does not work.

It makes sense that it does not work now since it expects HTML as a string.

A decent splitter should be able to render arbitrary Angular components as content.

[Indrajith Srinivasan]

Hi Alain,

Greetings from Syncfusion support

We have validated the reported query and unable to reproduce the issue at our end. We suspect the packages are duplicated in your node_modules, can you please run the below command to remove the duplicate packages. We have also prepared a sample in the Angular 7 environment.

Removing Duplicates: https://ej2.syncfusion.com/angular/documentation/common/how-to/update-npm-package/#update-syncfusion-npm-package 

Documentation: https://ej2.syncfusion.com/angular/documentation/splitter/getting-started/#getting-started-with-angular-cli

KB guidelines: https://www.syncfusion.com/kb/10398/how-to-get-started-easily-with-syncfusion-angular-7-splitter

Sample: https://www.syncfusion.com/downloads/support/forum/142826/ze/Angular7Splitter983582042

Regards, 

Indrajith