How to load script file from component html?

Question

Basically I wanted to load component html specific script file, so that script I'm going to put script file reference inside component html itself, I'm seeing that inner script file has been ignored while rendering component html on page.

Component

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  templateUrl: 'test.html'
})
export class AppComponent { }

test.html

<div>
  <h1>My First Angular 2 App</h1>
</div>
<script src="test.js"></script>

Above is my code what I tried & I already have test.js there in place.

Plunkr Here

Is there any way to load component specific javascript file with component OR with its html?

Answer 1

Working Plunker

Security

It looks like Angular takes out script tags from Html templates.

From the Angular Docs:

It removes the <script> tag but keeps safe content, such as the text content of the <script> tag

Angular provides methods to bypass security, but for your use case it looks like a service would be helpful.

Services

The preferred way to include your own custom script in your component from a separate dedicated file would be to create a service.

I took the code from your Plunker's script.js file and put it into a service like this:

// File: app/test.service.ts
import { Injectable } from '@angular/core';

@Injectable()
export class TestService {
    testFunction() {
      console.log('Test');
    }
}

Then I imported the service and called the custom code like this:

// File: app/app.component.ts
import { Component, OnInit } from '@angular/core';
import { TestService } from './test.service';

@Component({
  selector: 'my-app',
  templateUrl: 'test.html',
  providers: [TestService]
})
export class AppComponent implements OnInit {
  constructor(private testService: TestService) {}
  ngOnInit() {
    this.testService.testFunction();
  }
}

Lifecycle hooks

If you want to call your service's custom code at a specific point you can take advantage of lifecycle hooks. For example you can call your code using the ngAfterViewInit() instead of ngOnInit() if you want to wait until the view has loaded.