0

I have been following the very beginning of the angular 4 get started. I have completed the entire page here https://angular.io/guide/quickstart. At the end of this I wanted to experiment by adding new external js functionality to play around with gantt charts. This is the external js framework that I want to import into this quickstart project: http://jsgantt.com/. Now my issue is inside of the index.html i follow with adding the js/css files of the jsgantt framework but the angular app is not picking up my script. I have followed this by adding inside the script of angular-cli.json file but its still not working when i follow the how to use guide for jsgantt.js. how to include external js file in angular 4 and call function from angular to js. Can anyone please help me I am completely new to this stuff and have no understanding of the new angular 4 stuff. I played with angularjs before 2 years ago but I work primarily in java for my job.

-Update changed approach and used npm install --save js-gantt

My angular-cli-json file

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "my-app"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.css"
      ],
      "scripts": [
        "../node_modules/js-gantt/dist/js-gantt.min.js"
      ],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json"
    },
    {
      "project": "src/tsconfig.spec.json"
    },
    {
      "project": "e2e/tsconfig.e2e.json"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {}
  }
}

In my app.component.ts file the following: 

import { Component } from '@angular/core';
import * as _ from 'js-gantt';

declare var GanttChart;

export class


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'My First Angular App';
}

How do I use this js-gantt inside the page?

Teki2019
  • 1
  • 1
  • Show some code so we can verify your just adding it correctly. maybe the angular-cli.json – rjustin Sep 22 '17 at 17:37
  • In the angular-cli.json the jsgant file needs to have its full path not just the name. So unless its alone in the same directory as your angular-cli.json that will look different. – rjustin Sep 22 '17 at 17:56
  • You do not include your Systemjs module definitions anywhere – rjustin Sep 22 '17 at 18:09
  • The code you posted above with the 'declare var JSGantt: any;' that needs to be included somewhere as a script tag or otherwise. – rjustin Sep 22 '17 at 18:14
  • Should that not be inside of the typings.d.ts file and instead inside the app.component.ts? In the link to to the related question he has the typings file declare the variable and then he is using some component class for the import? So something like "import * as gantt from 'JSGantt';"? – Teki2019 Sep 22 '17 at 18:23
  • yes but where does the typings file get included – rjustin Sep 22 '17 at 18:30
  • ah I didnt know you need to include it. I dont have a include for it anywhere, where should the inclusion go? – Teki2019 Sep 22 '17 at 18:50
  • add it in the angular cli.json scripts with a full path – rjustin Sep 22 '17 at 18:55
  • Ok updated the scripts to the full path but now its saying: unexpected token var, and undefined JSGantt, I updated the post with the new code to what i currently have. – Teki2019 Sep 22 '17 at 19:21

0 Answers0