У меня есть одностраничное приложение, созданное с углом 7. Когда я перехожу на определенные страницы, я замечаю, что некоторые части DOM неправильно структурированы. Однако, когда я обновляю страницу, DOM может реструктурировать HTML так, как это было задумано. Мое одностраничное приложение использует внешние файлы javascript и css из шаблона, которые были добавлены в мой файл angular.json. Однако, когда я перемещаюсь от определенных страниц, используя angular-router, а затем возвращаюсь на предыдущую страницу, HTML-код не структурирован должным образом. Только когда я обновляю страницу, она правильно структурирует содержимое. Мой вопрос: что является причиной этого и как заставить мое одностраничное приложение распознавать и реализовывать как внешние CSS, так и JavaScript-файлы, используя без обновления страницы?
Я попытался перезапустить угловой сервер с помощью ng-serve
Вот пример моей домашней страницы, которая использует внешний файл javascript для создания слайдера для баннера моей домашней страницы
<div class="eco_wrapper">
<div class="content">
<app-home-banner></app-home-banner>
<app-home-eco-services></app-home-eco-services>
<app-home-eco-promotion></app-home-eco-promotion>
<app-home-eco-video></app-home-eco-video>
<app-home-eco-products></app-home-eco-products>
<app-home-eco-testimonal></app-home-eco-testimonal>
<app-home-eco-blog></app-home-eco-blog>
</div>
</div>
Вот пример того, как я добавил внешние CSS-файлы в мой массив стилей angular.json.
{
"input": "src/assets/css/bootstrap.css"
},
{
"input": "src/assets/css/font-awesome.css"
},
{
"input": "src/assets/css/chosen.min.css"
},
{
"input": "src/assets/css/slick-slider.css"
},
{
"input": "src/assets/css/slick-slider.css"
},
{
"input": "src/assets/css/owl.carousel.css"
},
Вот пример того, как я добавил свои внешние js-файлы в массив скриптов angular.json
"src/assets/js/jquery.js",
"src/assets/js/bootstrap-lab.js",
"src/assets/js/bootstrap.js",
"src/assets/js/slick-slider.js",
"src/assets/js/jquery.bxslider.js",
"src/assets/js/owl.carousel.js",