console.log('from settings ' + @Configuration["APP_ID"]);
You have to keep in mind that rendering something on the server using Razor has nothing to do with how that is being interpreted in the browser.
When Razor renders the above, it will write the following to the result (when APP_ID = "xxxxxxxxxx"):
console.log('from settings ' + xxxxxxxxxx);
As you can see, there is now the value of your APP_ID written directly inside the console.log call. Razor does not know what it is writing though so this is how it will produce the output.
Then, when this is being received and executed by the browser, the browser will see that + xxxxxxxxxx part which, depending on the actual value, will fail with one of many possible errors. Because from the JavaScript view point, this is invalid.
So in order to fix this, you will have to make sure that your Razor view produces valid code for the browser. This applies to both JavaScript and HTML too. One way to do this is to use the JSON serializer that is available within Razor views. Since JSON is the JavaScript notation, it will always be valid JavaScript, so you can use this well for passing data from Razor to JavaScript.
In your case, you could write it like this:
@using Microsoft.Extensions.Configuration
@inject IConfiguration Configuration
<!DOCTYPE html>
<html lang="en">
<head>
<script>
console.log('from settings ' + @Json.Serialize(Configuration["APP_ID"]));
…
Note the Json.Serialize call around your value. When the JSON serializer receives just a string, it will properly enquote it – and also take care of properly escaping any quote within the value itself. So this is a very safe way to embed your value into JavaScript.
@Configuration["APP_ID"]value for it to be parsed as valid javascript. Use@Html.Raw(Json.Encode(val))