Issue with loading third party library in Angular 6 - angular6

Question

Issue with loading third party library which is dependence on another third party library. In my case, i'm using bootstrap(v3.3.7) which is required JQuery. I included these libraries as per angular suggested way and successfully compile the application, if run it in browser i got a console error.
Versions
"dependencies": {
"#angular/animations": "^6.0.0",
"#angular/common": "^6.0.0",
"#angular/compiler": "^6.0.0",
"#angular/core": "^6.0.0",
"#angular/forms": "^6.0.0",
"#angular/http": "^6.0.0",
"#angular/platform-browser": "^6.0.0",
"#angular/platform-browser-dynamic": "^6.0.0",
"#angular/router": "^6.0.0",
"#types/bootstrap": "^3.3.33",
"#types/jquery": "^3.3.1",
"bootstrap": "^3.3.7",
"core-js": "^2.5.4",
"jquery": "3.3.1",
"malihu-custom-scrollbar-plugin": "3.1.5",
"rxjs": "^6.0.0",
"zone.js": "^0.8.26" }
Sample code and console error
app.component.ts
import { Component, ElementRef, OnInit, AfterViewInit } from
'#angular/core';
import * as $ from 'jquery';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'app';
constructor(private element: ElementRef){ }
ngOnInit() {
$('.dropdown-toggle').dropdown();
}
}
angular.json
"options": {
"outputPath": "dist/ang6",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
{ "input": "node_modules/bootstrap/dist/css/bootstrap.min.css" },
{ "input": "src/styles.css" }
],
"scripts": [
{ "input": "node_modules/jquery/dist/jquery.js" },
{ "input": "node_modules/bootstrap/dist/js/bootstrap.min.js" }
]
},
console error
error_message_pic
Is angular 6 changed the way of load/include the third party library files? Can anyone please help me to resolve this issue?