How to load JS script in Angular8?

V

ViKuz2019-12-19 11:26:51

Angular

ViKuz, 2019-12-19 11:26:51

I have a problem with the display of elements on pages when following links
. On initial load, everything is completely displayed.
When switching 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 being rebuilt, 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>

  <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 template

...

<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>

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.
PS
Styles and scripts also tried to load in angular.json in

"styles": [
  "src/styles.css"
],
"scripts": []