1

I want to use js file and jquery functions in index.html of angular2

so, I typed 

<head>
  <script>document.write('<base href="' + document.location + '" />');</script>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>

  <script src="https://code.angularjs.org/2.0.0-beta.6/angular2-polyfills.js"></script>
  <script src="https://code.angularjs.org/tools/system.js"></script>
  <script src="https://code.angularjs.org/tools/typescript.js"></script>
  <script src="https://code.angularjs.org/2.0.0-beta.6/Rx.js"></script>
  <script src="https://code.angularjs.org/2.0.0-beta.6/angular2.dev.js"></script>
  <script src="https://code.angularjs.org/2.0.0-beta.6/router.dev.js"></script>
  <script src="https://code.angularjs.org/2.0.0-beta.6/http.dev.js"></script>

  <script src="javascript file path"></script>
  
<script>
System.config({
    typescriptOptions: {emitDecoratorMetadata: true},
    packages: {'modules': {format: 'register', defaultExtension: 'js'}}
});

System.import('modules/app/main')
    .then(null, console.error.bind(console));
</script>
</head>
<body>
<my-app></my-app>
</body>

into the index.html and I can confirm the imported javascript file using

the "network" of chrome debug tool. and It has a regular flow that

javascript file is imported before importing angular2 files like .ts and .js files

but It is not operating.

I don't know why javascript files are not working.

please help me.

Improve this question
1
  • Your code isn't visible, you might want to edit your question to include the code you meant to.
    – NMunro
    Commented Feb 23, 2016 at 11:37

1 Answer 1

Reset to default
2

You just include the jQuery library in index.html and in your component class at the bottom (outside of the export class xyz{} type

declare var jQuery: any

then you will be able to use jQuery('#something')....

Improve this answer
2
  • Wah Great !! thanx for awesome answer. but Class of component still showing red warning why ? code works fine.
    – Pardeep Jain
    Commented Feb 24, 2016 at 11:10
  • Thank for your answer. but I wonder a way to include js files in index.html. because after rendering angular2, They are not including in index.html like jquery.js, bootstrap.min.js and etc (<script src="/js/jquery/jquery.js><script>. so I can't use methods made javascript and script files. I want to find a way for including js files in index.html and use it.
    – Young Joon
    Commented Feb 25, 2016 at 0:58

Not the answer you're looking for? Browse other questions tagged or ask your own question.