I have an angular app with multiple route (=url). I need to load only CSS, JS when I go in module using Qlik (to avoid unused loaded files) :
myApp.com
myApp.com/tools/...
myApp.com/dashboard/... // only those routes use Qlik.
So I have a 'guard' that loads require.js from Qlik Server to get all JS that Qlik needs.
Here an exemple of demo that shows my services : https://stackblitz.com/edit/angular-s3non3 (I commented the part of injection about Qlik (require.js and qlik-styles.css) to avoid error for demo).
If load JS takes time, the guard force to wait complete then I go in the route. So I can create component to display graph like that :
//HTML:
<div id="qv01" style="height:200px;"></div>
//Typescript:
export class DashboardComponent implements OnDestroy {
qlikApp: {};
constructor() {
window['require'].config( {
baseUrl: 'http://myServerQlik/jwt/resources/',
} );
window['require'](['js/qlik'], (qlik: {}) => {
this.qlik = qlik;
resolve(true);
});
this.qlikApp = this.qlik['openApp']('idApp', this.config);
this.qlikApp['getObject']('qv01', 'myGraphId');
}
ngOnDestroy(): void {
this.qlikApp['close']();
}
}This (extract of) code loads properly the graph and data from Qlik. But CSS doesn't work :
- loading CSS file in head tag breaks some rules of my app (not enough focus on Qlik elements).
- loading CSS file as import, in component with no encapsulation, don't load correctly files for fonts, image (background: url()), and put wrong places for tooltips (because tooltips are add in DOM outside of my component)...
// TypeScript:
@Component({
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.scss'],
encapsulation: ViewEncapsulation.None,
})
export class DashboardComponent {
...
}// scss :
@import url("https://myServerQlik/jwt/resources/autogenerated/qlik-styles.css");So where can I find a file containing minimal CSS to display graphs ? Or which rules can I remove ? How often the file changes (in case I update manually and store it in my app project) ?
