Se esta haciendo un menú con Bootstrap, y se requiere hacer un submenu pero NO se están visualizando los item del submenu

[![introducir la descripción de la imagen aquí][1]][1]

el Código html lo he revisado varias veces pero no encuentro que pudiera estar fallando, no se si hace falta algo en CSS

          

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

    /*el css del component nav-menu.component.css*/

    .navbar-fixed {
      position: fixed;
      z-index: 1000;
      top: 0;
      max-width: 100%;
      min-width: 100%;
      width: 100%;
      box-shadow: 0px 4px 3px rgba(0, 0, 0, .5);
    }

<!-- language: lang-html -->

    <!-- Menu Productos -->
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">
        <i class="fas fa-project-diagram"></i> Productos <b class="caret"></b>
      </a>
      <ul class="dropdown-menu dropdown-menu--dark">

        <li>
          <a class="dropdown-item" [routerLink]='["/ConsoProductos"]'>
            <i class="fa fa-align-left" aria-hidden="true"></i> Consolidado
          </a>
        </li>
        <li class="dropdown-submenu">
          <a [routerLink]='["/RegistroProductos"]'>
            <i class="fa fa-file" aria-hidden="true"></i> Registro de Productos
          </a>
          <ul class="dropdown-menu">
            <li>
              <a [routerLink]='["/GenNuevoConocimiento"]'>
                <i class="fa fa-align-left" aria-hidden="true"></i> Generación Nuevo Conocimiento
              </a>
            </li>
            <li>
              <a [routerLink]='["/DlloTecnoInnova"]'>
                <i class="fa fa-align-left" aria-hidden="true"></i> Desarrollo Tecnológico e Innovación
              </a>
            </li>
            <li>
              <a class="dropdown-item" [routerLink]='["/ApropSocialCono"]'>
                <i class="fa fa-align-left" aria-hidden="true"></i> Apropiación Social del Conocimiento
              </a>
            </li>
           </ul>
        </li>
      </ul>

    </li>

    <!-- Fin Menu productos -->

<!-- end snippet -->

Debería de sacarme un menu y submenu como se indica en esta imagen...

[![introducir la descripción de la imagen aquí][2]][2]

**UPDATE**
    

 El código del componente del nav-bar

    import { Component, OnInit } from '@angular/core';
     declare let $: any;

     @Component({
     selector: 'app-nav-menu',
     templateUrl: './nav-menu.component.html',
     styleUrls: ['./nav-menu.component.css']
     })

     export class NavMenuComponent {
      isExpanded = false;

     collapse() {
      this.isExpanded = false;
     }

     toggle() {
      this.isExpanded = !this.isExpanded;
     }

     ngOnInit() {
      const altura = $('.navbar').offset().top;

      $(window).on('scroll', function () {
       if ($(window).scrollTop() > altura) {
         $('.navbar').addClass('navbar-fixed');
       } else {
        $('.navbar').removeClass('navbar-fixed');
       }
      });
 
        $('.nav-principal > li.dropdown').hover(function () {
        $(this).addClass('open');

        $(this).mouseleave(function () {
        $(this).removeClass('open');
       });
     });

     $('.modal-content').resizable({
       //alsoResize: ".modal-dialog",
       minHeight: 300,
       minWidth: 300
      });
      $('.modal-dialog').draggable();

    $('#ModalAgregar').on('show.bs.modal', function () {
      $(this).find('.modal-body').css({
        'max-height': '300%'
      });
     });
    }
    }


No he podido encontrar el error porque no se visualiza los item del submenu!!!

  [1]: https://i.sstatic.net/p9lms.png
  [2]: https://i.sstatic.net/jlgYG.png