CODEWITHSUNDEEP
javascriptangulartypescripttypescript-typings
Kevin Sar
Kevin Sar

Reputation: 340

How to import JavaScript file into angular2

I am having trouble figuring out how to import a javascript file into my angular2 project. It is a file that is not a module that is apart of npm and the only instructions I have been able to find is using npm which is not an option here.

I am using angular cli and in my angular-cli.json file I have:

{
"apps": [
  "styles": [..],
  "scripts": ["../pathtomyjs/file.js"] 
]}

I ran ng build and ng serve and when I open up my app and look at the web console and try referencing the function that is in my js file, I am able to do so successfully.

Example in the console I type in:

var test = MyObject;

and I get test = {};

However, when I try do 

let test = MyObject;

in my component .ts file I get :

home.component.ts (10,11): Cannot find name 'MyObject'.)

Not sure how to do this in Angular2.

Thanks!

Upvotes: 11

Views: 26090

Answers (4)

Richard Strickland
Richard Strickland

Reputation: 1841

I did a deep dive on this here:

This is a great question and I'm glad you ask because I wish I had what I'm about to write the first time I encountered this little problem. This is a typescript/javascript and webpack issue before it is an angular issue. I definitely am planning a writeup on my blog soon as possible.

Your Scenario:

You run 

npm install mathjs
  1. Now you try to use math.js from a component:

  2. Find math.js dist js file (node_modules/mathjs/dist/math.js) and reference like this

    import {mathjs} from "../../node_modules/mathjs/dist/math";

  3. But you get error message saying "set --allowJS". You do that like this:

    Set --allowJS in config (tsconfig.json) { "compilerOptions": { "allowJs": true, ...

  4. Now you get:

ERROR in ../node_modules/mathjs/dist/math.js (12209,13): Unreachable code detected.

  1. Looking in the math.js source, you see that it is an old school module but there is no root wrapper function (one function to bring them all and in the darkness bind them..) (more on that later).

Solution: install a typings file for the target lib (@types/mathjs)

read more...

Upvotes: 1

Dan
Dan

Reputation: 1355

Do:

declare var MyObject: any;

let test = MyObject;

Or:

let test = (<any> MyObject);

For jQuery:

declare var jQuery: any;

jQuery.ajax({ ... });

Upvotes: 8

El Dude
El Dude

Reputation: 5618

I put my js files into app/assets/scripts and load them in index.html <script src="assets/scripts/foobar.js"></script> . This is for a ionic2 / angular2 project.

In the module you have to define your functions like this in global scope of the module file

declare var myFancyFunction;

Upvotes: 0

Michael Kang
Michael Kang

Reputation: 52837

Is it a 3rd party library? you'll have to let the typescript compiler know where the type definition files are. Normally, it looks under node_modules/@types folder. For example, if you wanted to use jQuery, you would install the necessary type definition files by running: 

npm install @types/jquery

Upvotes: 2

Related Questions