Angular 15: Scripts not loading correctly from angular.json

Question

I have imported some js files into angular.json but I don't know why some work and others not.

angular.json:

                        "styles": ["src/styles.scss", "src/assets/css/all.min.css"],
                        "scripts": [
                            "./src/assets/global_assets/js/main/jquery.min.js",
                            "./src/assets/global_assets/js/main/bootstrap.bundle.min.js",
                            "./src/assets/global_assets/js/plugins/visualization/d3/d3.min.js",
                            "./src/assets/global_assets/js/plugins/visualization/d3/d3_tooltip.js",
                            "./src/assets/global_assets/js/plugins/ui/moment/moment.min.js",
                            "./src/assets/global_assets/js/plugins/pickers/daterangepicker.js",
                            "./src/assets/js/app.js",
                            "./src/assets/global_assets/js/demo_pages/dashboard.js",
                            
                            "./src/assets/global_assets/js/plugins/visualization/echarts/echarts.min.js",
                            "./src/assets/global_assets/js/demo_charts/echarts/light/bars/columns_basic.js",
                            "./src/assets/global_assets/js/demo_charts/echarts/light/bars/columns_stacked.js",
                            "./src/assets/global_assets/js/demo_charts/echarts/light/bars/columns_thermometer.js",
                            "./src/assets/global_assets/js/demo_charts/echarts/light/bars/columns_stacked_clustered.js",
                            "./src/assets/global_assets/js/demo_charts/echarts/light/bars/waterfall_compositive.js",
                            "./src/assets/global_assets/js/demo_charts/echarts/light/bars/waterfall_change.js",
                            "./src/assets/global_assets/js/demo_charts/echarts/light/bars/columns_timeline.js",

                            "./src/assets/global_assets/js/plugins/tables/datatables/datatables.min.js",
                            "./src/assets/global_assets/js/demo_pages/datatables_basic.js"
                        ]

What's going wrong and how can I fix it?

edit: Sory for the vague question.

My file structure: File structure of angular project

chart.component.html:

<div class="chart-container">
    <div class="chart has-fixed-height" id="columns_timeline"></div>
</div>

I call chart in test-dashboard.component.html:

<app-chart></app-chart>

After a while I realized that when script run at that time my "columns_timeline" node is not been created in DOM, I try to add initial function in setTimeout() and it work after I reload the page but not work for the first time:

columns_timeline.js:

var EchartsColumnsTimelineLight = (function () {
    //...code
})();

document.addEventListener('DOMContentLoaded', function () {
    setTimeout(() => {
        EchartsColumnsTimelineLight.init();
    }, 1000);
});

How can I make it run correctly!

Answer 1

sadly this doesn't show enough information about the issue. but something to bring to your attention which could fix your problem is the order in how these imports are placed could affect how they are working. scripts are loaded synchronously, in-order, so if script B has a dependency on script A then you should ensure that the tag for A appears before that for B.