I have a problem displaying items on pages when following links
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.801.3
@angular-devkit/build-angular 0.801.3
@angular-devkit/build-optimizer 0.801.3
@angular-devkit/build-webpack 0.801.3
@angular-devkit/core 8.1.3
@angular-devkit/schematics 8.1.3
@ngtools/webpack 8.1.3
@schematics/angular 8.1.3
@schematics/update 0.801.3
rxjs 6.4.0
typescript 3.4.5
webpack 4.35.2
At boot, everything is fully displayed. When you go to another page - there is no part of the content that is loaded dynamically by scripts (parallax, lazyload, etc.). It seems that the DOM is rebuilding, and the scripts were previously loaded and do not affect the display. In this case, the page template is the same.
index.html
<! DOCTYPE html>
<html>
<head>
....
<meta name = "msapplication-TileImage" content = "assets / img / favicon / mstile-144x144.png">
<meta name = "msapplication-config" content = "assets / img / favicon / browserconfig.xml">
<meta name = "theme-color" content = "# ffffff">
<! - / 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},
...
{path: 'solutions', component: SolutionComponent, children: [
{path: 'market', component: MarketPageComponent},
...
]}
]}
];
@NgModule({
imports: [
RouterModule.forRoot(routes)
],
exports: [RouterModule]
})
export class AppRoutingModule {
}
public.component.html
<div class="message-red"></div>
<div class="message-green"></div>
<div class="loader">
<img src="assets/img/icons/loader.svg"/>
</div>
...
<div class="wrapper" id="main">
<!-- Шапка -->
<header id="header">
<div class="container">
<div class="top">
<a href="index.html" class="logo">
<img src="assets/img/logo/logo.png" alt="">
</a>
...
</div>
<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>
Viewing the source by Ctrl + U shows that one of the files is not connected
...
<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>
I don’t understand what is the reason.
P.S. Styles and scripts also tried loading in angular.json in
"styles": [
"src / styles.css"
],
"scripts": []
