Некоторые загрузочные функции не работают в Angular, но работают в обычном HTML-файле

Question

Я как в Angular, так и в Bootstrap. Я создаю проект Angular, затем добавляю к нему начальную загрузку после факта (npm install bootstrap) и затем пробую различные функции начальной загрузки на одной из html-страниц. Некоторые из них работают, некоторые нет.

Код в ответе на этот вопрос, например: Отклоняемое предупреждение . Предупреждение отображается, но когда я нажимаю X, оно не исчезает. Как ни странно, если я получаю доступ к точно такому же HTML-файлу непосредственно в своем браузере, а не через обслуживаемую Angular-страницу, эта функция работает нормально.

Так где я установил что-то не так? Вот несколько попыток, которые я сделал, основываясь на различных подсказках в Интернете: Вот соответствующая часть моего angular.json:

    "styles": [
    "node_modules/jquery/dist/jquery.js",
    //"node_modules/tether/dist/js/popper.js",
    "src/styles.scss",
    {
        "input": "./node_modules/bootstrap/dist/css/bootstrap.css"
    }
    ],

Мой файл styles.css содержит:

    @import url('https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css');
    @import "~bootstrap/dist/css/bootstrap.css";

Answer 1

1. Импорт файлов JavaScript в свойстве scripts, а не в свойстве styles.

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

2. Не импортируйте файл CSS дважды.

@import "~bootstrap/dist/css/bootstrap.css";