How to add external javascript library in a gateway project

Question

I'm trying to add Simpl5 javascript library to my gateway unsuccessfully. I've put SIPml-api.js and SIPml.js in webapp/content/scripts folder.

In .angular-cli.json I've update scripts array like this :

    "scripts": [
        "content/scripts/SIPml-api.js",
        "content/scripts/SIPml.js"
    ]

I've then try to call SIPml in component like this :

import { Component, OnInit } from '@angular/core';
declare var SIPml: any;

.

ngOnInit() {
    SIPml.setDebugLevel((window.localStorage && window.localStorage.getItem('org.doubango.expert.disable_debug') === 'true') ? 'error' : 'info');

}

I getting ERROR ReferenceError: SIPml is not defined in the console.

Can someone help please ?

Answer 1

JHipster does not fully supports angular cli as @GaëlMarziou already mentioned in comments.

The original idea of supporting the CLI was only for code generation.

So any .angular-cli.json modificatons won't have any effect as JHipster is using its own build/serve chain (have a look in to package.json custom scripts, they are not based on ng serve/build, etc ) check this issue discussion for more details.

You need to reference your custom css and js in vendor.ts then when you run npm run serve you will see the result.