0

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.

Jonathan Applebaum
  • 5,738
  • 4
  • 33
  • 52
  • check this [LINK](https://rahulrsingh09.github.io/AngularConcepts/faq) it has a question related to importing js using types and without typesAlos you can look at this [answer](https://stackoverflow.com/questions/45339209/jquery-is-not-defined-in-bootstrap-sass/45387777#45387777) – Rahul Singh Oct 08 '17 at 17:34

1 Answers1

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();
}
Z. Bagley
  • 8,942
  • 1
  • 40
  • 52
  • 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)` (?) – Jonathan Applebaum Oct 09 '17 at 09:02
  • @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? – Z. Bagley Oct 09 '17 at 14:04
  • No, i am using visual studio and i think that is the problem – Jonathan Applebaum Oct 09 '17 at 14:06
  • 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. – Z. Bagley Oct 09 '17 at 14:11