У меня проблема с отображением элементов на страницах при переходе по ссылкам
При начальной загрузке - всё полностью отображается.
При переходе на другую страницу - отсутствует часть контента, которая подгружается динамически скриптами (parallax, lazyload и т.д.).
Такое впечатление, что перестраивается DOM, а скрипты были ранее загружены и не влияют на отображение.
При этом шаблон страниц один и тот же.
index.html
<!DOCTYPE html>
<html>
<head>
<base href="/">
<meta name="keywords" content="">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
...
<!-- / favicon -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/bootstrap-grid.min.css">
<link rel="stylesheet" href="assets/css/bootstrap-reboot.min.css">
<link rel="stylesheet" href="assets/css/styles.min.css">
</head>
<body>
<app-root></app-root>
<script type="text/javascript" src="assets/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="assets/js/scripts.min.js"></script>
<script type="text/javascript" src="assets/js/script.js"></script>
</body>
</html>
app-routing.module.ts
import { NgModule } from '@angular/core';
import {Routes, RouterModule, PreloadAllModules} from '@angular/router';
import { PublicComponent } from './public/public.component';
import { MainPageComponent } from './public/main-page/main-page.component';
import { CompanyPageComponent } from './public/company-page/company-page.component';
...
const routes: Routes = [
{
path: '', component: PublicComponent, children: [
{path: '', redirectTo: '/', pathMatch: 'full'},
{path: '', component: MainPageComponent},
{path: 'company', component: CompanyPageComponent}
...
]}
];
@NgModule({
imports: [
RouterModule.forRoot(routes)
],
exports: [RouterModule]
})
export class AppRoutingModule {
}
Шаблон public.component.html
...
<div class="wrapper" id="main">
<!-- Шапка -->
<header id="header">
<div class="container">
...
<nav class="navigation">
<ul>
<li [routerLinkActiveOptions]="{ exact: true }" routerLinkActive="active"><a [routerLink]="['/']"><span>Главная</span></a></li>
<li routerLinkActive="active"><a [routerLink]="['/company']"><span>О компании</span></a></li>
<li routerLinkActive="active"><a [routerLink]="['/service']"><span>Услуги</span></a></li>
<li routerLinkActive="active"><a [routerLink]="['/price']"><span>Цены</span></a></li>
<li routerLinkActive="active"><a [routerLink]="['/solutions']"><span>Решения</span></a></li>
<li routerLinkActive="active"><a [routerLink]="['/faq']"><span>Помощь</span></a></li>
</ul>
</nav>
</div>
</header>
<div class="page-content">
<router-outlet></router-outlet>
</div>
<footer>
...
</footer>
</div>
Просмотр источника по Ctrl+U выдаёт, что не подключается один из файлов
<app-root></app-root>
<script type="text/javascript" src="assets/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="assets/js/scripts.min.js"></script>
<!--<script type="text/javascript" src="assets/js/scripts.js"></script>-->
<script src="runtime.js" type="module"></script><script src="polyfills.js" type="module"></script><script src="styles.js" type="module"></script><script src="vendor.js" type="module"></script><script src="main.js" type="module"></script></body>
</html>
Не пойму в чём причина.
P.S.
Стили и скрипты пробовал также загружать в angular.json в
"styles": [
"src/styles.css"
],
"scripts": []
Средний
Средний
