Javascript inside angular 2 template is not executing

Question

I am pretty new to Angular, so this may seem like a stupid question. But I was able to find little information regarding my issue from internet.

I have been trying to include some JavaScript code into an angular html template. But due to some reason, it is not getting executed.

I am also trying to load some js files into the template in order to execute some features in the views. I included these files in the root index.html and also inside the template file, but the required function in the template did not catch the codes from these js files. I am confused what I should do additionally here.

Please verify the codes below.

project.template.html

<div>
  // all the necessary view items
</div>
<script src="../../vendor.js"></script>
<script src="../../plugins.js"></script>
<script src="../../main.js"></script>
<script type="text/javascript">
    $(function() {
        alert('hi');
    });
</script>

<router-outlet></router-outlet>

index.html

<!DOCTYPE html>
<html>
  <head>
    <base href="/">
    <title>Title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/app/main.css">
    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>

    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
    <script src="vendor.js"></script>
    <script src="plugins.js"></script>
    <script src="main.js"></script>
  </head>

  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

There are no errors in the console. Also, I see the JS files are loaded into the view from the Chrome developer tools. But they are not invoked.

Please let me know if any more code is required.

try to wrap it with a setTimeout(function(){},1);

Mazz
– Mazz

2017-02-06 16:52:37 +00:00
Commented Feb 6, 2017 at 16:52 — Mazz
– Mazz, Commented Feb 6, 2017 at 16:52
@Mazz Where do I add this?

Philip John
– Philip John

2017-02-06 18:14:07 +00:00
Commented Feb 6, 2017 at 18:14 — Philip John
– Philip John, Commented Feb 6, 2017 at 18:14

Tiep Phan · Accepted Answer · 2017-02-06 18:16:21Z

please following this tutorial

your template project.template.html contain untrusted value, it'll be sanitize by Angular

https://angular.io/docs/ts/latest/guide/security.html

Sanitization and security contexts

Sanitization is the inspection of an untrusted value, turning it into a value that is safe to insert into the DOM. In many cases, sanitization does not change a value at all. Sanitization depends on context: a value that is harmless in CSS is potentially dangerous in a URL.

Angular defines four security contexts—HTML, style, URL, and resource URL:

HTML is used when interpreting a value as HTML, for example, when binding to innerHtml

Style is used when binding CSS into the style property

URL is used for URL properties such as

Resource URL is a URL that will be loaded and executed as code, for example, in

Angular sanitizes untrusted values for the first three items; sanitizing resource URLs is not possible because they contain arbitrary code. In development mode, Angular prints a console warning when it has to change a value during sanitization.

Trusting safe values

Sometimes applications genuinely need to include executable code, display an from some URL, or construct potentially dangerous URLs. To prevent automatic sanitization in any of these situations, you can tell Angular that you inspected a value, checked how it was generated, and made sure it will always be secure. But be careful! If you trust a value that might be malicious, you are introducing a security vulnerability into your application. If in doubt, find a professional security reviewer.

You can mark a value as trusted by injecting DomSanitizer and calling one of the following methods:

bypassSecurityTrustHtml

bypassSecurityTrustScript

bypassSecurityTrustStyle

bypassSecurityTrustUrl

bypassSecurityTrustResourceUrl

I tried almost all the ways provided above to load scripts using DomSanitizer. But still I m not able to load the scripts correctly. Came across many posts for Urls and Htmls. Tried the same for Scripts, but it was not working. Could you let me know how to implement this?

Collectives™ on Stack Overflow

Javascript inside angular 2 template is not executing

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related