ERROR TypeError: value.replace is not a function

[Pramesh Bajracharya]

Bug Report or Feature Request (mark with an x)

- [x] bug report
- [ ] feature request
- [ ] question

OS and Version?

Windows 10 - 19041.630

Versions

Angular CLI: 10.0.8
Node: 12.18.3
OS: win32 x64

Angular: 10.0.14
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package Version

@angular-devkit/architect 0.1000.8
@angular-devkit/build-angular 0.1000.8
@angular-devkit/build-optimizer 0.1000.8
@angular-devkit/build-webpack 0.1000.8
@angular-devkit/core 10.0.8
@angular-devkit/schematics 10.0.8
@angular/cdk 10.2.7
@angular/cli 10.0.8
@angular/flex-layout 11.0.0-beta.33
@angular/material 10.2.7
@ngtools/webpack 10.0.8
@schematics/angular 10.0.8
@schematics/update 0.1000.8
rxjs 6.5.5
typescript 3.9.7
webpack 4.43.0

Repro steps

No additional steps performed other than installation steps from the docs/readme.

I am using this like:

 <mat-card class="sidenav-card">
    <b>Request Body</b>
    <pre><code [highlight]="getRequestBody()"></code></pre> -->
</mat-card>

and the getRequestBody() is implemented as:

getRequestBody(): any {
    return `
        public kill(){
            console.log("This is a fight song.");
        }
    `
}

The log given by the failure

The code is being rendered into the UI but the console throws 1000+ error logs making browser slow and laggy.

Desired functionality

The straight up setup should not throw any errors.

[Murhaf Sousli]

You should not use a getter function in your template if you are not using the changeDetectionStrategy.OnPush
Because the hljs directive will trigger a change detection that will cause an inifinite loop

To fix this you have 2 options

• Use a variable instead of function to set the highlight input
  or
• Use changeDetectionStrategy.OnPush in your component

[Pramesh Bajracharya]

@MurhafSousli
Thanks a lot.

This worked.