CODEWITHSUNDEEP
javascriptangular
Magdas Walter
Magdas Walter

Reputation: 31

Angular 4: How to include external js libraries?

I know there were some of this topics, but I didn't find the solution for my problem.

I've tried to include this lib: https://github.com/euoia/hex-grid.js#new_module_hex-grid--HexGrid_new unfortunatelly I couldn't.

I put the unzipped project into src/js folder. Into angular-cli.json inside the scripts tag I put the url to the hex-grid.js: "scripts": ["js/hex-grid.js-master/src/hex-grid.js"]. the route is good, because the app was compiled succesfully. I have a game-map.component.ts file where I want to use this lib. 

import {Component} from '@angular/core';

declare var hexGrid: any;

@Component({
  selector: 'app-game-map',
  templateUrl: './game-map.component.html',
  styleUrls: ['./game-map.component.css']
})
export class GameMapComponent {

hex: any;

constructor() {
  this.hex = new hexGrid({
    width: 20,
    height: 10,
    orientation: 'flat-topped',
    layout: 'odd-q'
  });
  }
}

But I got this error: Uncaught ReferenceError: module is not defined at scripts.bundle.js:2

And it has problem with this module: module.exports = (function () { /**

Someone can help me in this issue? Thanks!

Upvotes: 3

Views: 1950

Answers (2)

Josh Lin
Josh Lin

Reputation: 2437

1.install npm install hex-grid.js in cmd

2.import * as hexGrid from 'hex-grid.js'

3.then use it

Upvotes: 2

Velkumar
Velkumar

Reputation: 1

To use this technique you have to place your someJsFile.js in your public folder so as the gwt compiler copy it to the final folder where it places the html and js stuff.

If you are using maven you have to check if the resources plugin is copying this file to the war and in which path.

By the way, there are other techniques to insert external javascript in your document:

Placing the script tag in your .html file. Using ScriptInjector.fromUrl(). A better approach is to use a TextResource and ScriptInjector.fromString() so as the compiler reads the javascript file and includes the content in the final compiled file. You can use gwtquery Ajax.getScript to get the script via ajax and inject it in the dom. A new way, recently added to gwtquery, allows you to include your javascript as a JSNI block, so as the compiler can optimize and obfuscate it.

Upvotes: 0

Related Questions