NGX-joyride is throwing an error that doesnt make sense

Question

I have used ngx-joyride version ^2.5.0 in my project and I am being faced with this error: Error: All the steps should have the 'joyrideStep' property set with a custom name.

Here is my steps code: export const guideTourSteps = [ 'step1@dashboard', 'step2', 'step3@projects', 'step4@dashboard', step5-1, 'step5-2', 'step6', step7, 'step8', 'step9', 'step10', 'step11-materials', 'step11-product', 'step11-end-of-life', 'step12', 'step13', 'step11-configuration', 'step14', 'step15', 'step16', 'step17', 'step18', 'step19', 'step20', 'step21', 'step22', 'step23', 'step24', 'step11-filling', 'step25', 'step26', 'step27', 'step28-chart-at-glance', 'step28-interpretation', 'step29', 'step30', 'step31', 'step32', 'step33', 'step34', 'step35', 'step36', 'step37', 'step38', // Add more tour steps as needed ];

<span class="child-span-links" [title]="i == 1 ? 'Materials' : i == 3 ? 'Product' : i == 7 ? 'End-of-life' : i == 0 ? 'Configuration' : ''" [joyrideStep]="'step11-' + children3.text.toLowerCase()" [text]="i == 1 ? guideTourStep11Str : i == 3 ? guideTourStep12Str : i == 7 ? guideTourStep13Str : i == 0 ? guideTourStep14Str : i == 4 ? guideTourStep26Str : ''" [id]="children3.text.toLowerCase()" (next)="onNext(i, children3.text)" title="{{children3.text}}">{{children3.text}}</span>

Here is my code. I tried commenting it all out. it still throws an error in console. This is causing my modal to stop working (doesnt close). I am using BsModelRef.