Angular.json scripts are not loading

[liesahead]

Bug Report or Feature Request (mark with an x)

- [X ] bug report
- [ ] feature request

Command (mark with an x)

- [ ] new
- [X ] build
- [ ] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Versions

Angular Version:

Angular CLI: 7.1.4
Node: 10.7.0
OS: win32 x64
Angular: 7.1.4
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.11.4
@angular-devkit/build-angular      0.11.4
@angular-devkit/build-ng-packagr   0.11.4
@angular-devkit/build-optimizer    0.11.4
@angular-devkit/build-webpack      0.11.4
@angular-devkit/core               7.1.4
@angular-devkit/schematics         7.1.4
@angular/cdk                       7.2.0
@angular/flex-layout               7.0.0-beta.22
@angular/material                  7.2.0
@ngtools/json-schema               1.1.0
@ngtools/webpack                   7.1.4
@schematics/angular                7.1.4
@schematics/update                 0.11.4
ng-packagr                         4.4.5
rxjs                               6.3.3
typescript                         3.1.6
webpack                            4.23.1

Description

angular.json "scripts" are not loading for some reason

NOT WORKING

"scripts": [
    "node_modules/codemirror/mode/css/css.js",
    "node_modules/codemirror/mode/javascript/javascript.js",
    "node_modules/codemirror/mode/htmlmixed/htmlmixed.js"
]

but when I import scripts right into component where I use them, it WORKS

import '../../../../../../../../../node_modules/codemirror/mode/css/css.js';
import '../../../../../../../../../node_modules/codemirror/mode/javascript/javascript.js';
import '../../../../../../../../../node_modules/codemirror/mode/htmlmixed/htmlmixed.js';

I don't like this 'workaround' to be fair, I tried to search why scripts are not loaded from angular.json, but haven't found any solutions except very bad 'workarounds'

Desired functionality

Scripts should be loaded from angular.json file

[alan-agius4]

Hi, can you explain what is the problem? I can see that they are included in the index.html as scripts,js

[clydin]

The most likely scenario is that those scripts rely on all of the html content being present at their respective time of initial execution. Or more specifically they are designed for static HTML pages. A SPA (Angular or otherwise) is dynamic by nature which would make such scripts fundamentally incompatible without additional code within the application to trigger the scripts to re-analyze the DOM when relevant elements are added or modified.

[liesahead]

Hi, can you explain what is the problem? I can see that they are included in the index.html as scripts,js

@alan-agius4 , the problem is that when I add some external scripts as global, they are not working (as I understand not being imported), but when I import them right into my TypeScript component, scripts working as expected. But I don't like the second way.

Not working if imported here

Working as expected if imported here

The important thing is, that other scripts work when imported globally. So I guess this has something to do with @clydin scenario then..

[liesahead]

I have solved this issue just by importing those scripts to module where they are used

[therjtkumar]

same problem unable to load script files from angular.json in angular 8, below is the code:

"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]

Any solution for this, doesn't find any solution on google as well. if not then only one solution left include these file to index.html page.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}