How to access external javascript file from angular 2 component

Question

I am very new to angular and front end web development, so maybe i am missing something basic but i did not succeed to search a solution for that issue.

according to that answer: Call pure javascript function from Angular 2 component

and following that example

I am trying to import external .js file to my angular component:

import '../../../src/Plugin/codemirror/mode/custom/custom.js'

@Component({
    selector: 'txt-zone',
    templateUrl: 'app/txtzone/Txtzone.component.html',
    styleUrls: ['app/txtzone/TxtZone.css'],


})

the path is the correct relative path, i know that because if it loads diractly from the url text box via the browser [http://localhost:50371/src/Plugin/codemirror/mode/custom/custom.js] i can see the file content...

this is the exception that the chrome debugger is throwing:

zone.js:2263 GET http://localhost:50371/src/Plugin/codemirror/lib/codemirror 404 (Not Found)

as you can see the path was changed (don`t understand why?)

1. how can i solve this issue?
2. why the path of the .js file is not the referenced path?
3. maybe there is a better way to load external .js file into my component?

it looks quite trivial question but after hours of searching i could not find any answer.

check this LINK it has a question related to importing js using types and without typesAlos you can look at this answer — Rahul Singh
– Rahul Singh, Commented Oct 8, 2017 at 17:34

Z. Bagley · Accepted Answer · 2017-10-08 17:48:30Z

3

A simple way to include custom javascript functions in your Angular 4 project is to include the item in your assets folder, and then use require to import it into your component typescript.

src/assets/example.js

export function test() {
    console.log('test');
}

src/app/app.component.ts

(before @Component(...))

declare var require: any;
const example = require('../assets/example');

(inside export class AppComponent implements OnInit { ...)

ngOnInit() {
  example.test();
}

answered Oct 8, 2017 at 17:48

Z. Bagley

9,2681 gold badge44 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jonathan Applebaum Over a year ago

thank your for the answer but its not working, if i declare: const example = require('../../assets/example'); the debugger is throwing: http://localhost:50371/src/assets/example 404 (Not Found) and if i declare: const example = require('../../assets/example.js'); debugger is throwing: zone.js:2263 GET http://localhost:50371/src/traceur 404 (Not Found) (?)

Z. Bagley Over a year ago

@jonathana That's strange behavior, and sounds like it's rooted in your compiler and not your actual code. Are you using Angular-CLI to build your project?

Jonathan Applebaum Over a year ago

No, i am using visual studio and i think that is the problem

Z. Bagley Over a year ago

That is definitely the problem. I'd highly recommend asking a new question that is specific to visual studio since we've narrowed it down to that. I'm looking over your question example closer, and that should work in a general environment. The only problem is visual studio is not recognizing the external file.

Collectives™ on Stack Overflow

How to access external javascript file from angular 2 component

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related