Angular CLI按需加载脚本求助：登录后侧边栏菜单JS失效

Let’s walk through the most common causes and fixes for your issue where the sidebar menu’s JavaScript stops working after login:

1. Ensure Proper Initialization with Angular Lifecycle Hooks #

If you’re using *ngIf to toggle the sidebar’s visibility (since it’s hidden by default until login), remember that *ngIf destroys and recreates the component when the condition changes. Any custom menu logic (like toggle handlers or dropdowns) needs to be reinitialized each time the component renders.

Use the ngAfterViewInit hook to attach event listeners or initialize third-party libraries—this runs after the component’s view is fully rendered:

import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html'
})
export class SidebarComponent implements AfterViewInit {
  // Reference your menu toggle button using a template variable
  @ViewChild('menuToggleBtn') menuToggleBtn!: ElementRef;

  ngAfterViewInit(): void {
    // Initialize menu toggle logic here
    this.menuToggleBtn.nativeElement.addEventListener('click', () => {
      const sidebar = document.querySelector('.sidebar');
      if (sidebar) sidebar.classList.toggle('active');
    });

    // If using a third-party library (e.g., Bootstrap dropdowns), reinitialize it here:
    // Example: $(this.menuToggleBtn.nativeElement).dropdown();
  }
}

In your template, add the template variable:

<button #menuToggleBtn class="menu-toggle">Toggle Menu</button>
<div class="sidebar" *ngIf="isLoggedIn">...</div>

2. Avoid Vanilla JS Queries Where Possible #

Instead of using document.getElementById or querySelector, leverage Angular’s ViewChild or ViewChildren to reference elements. This ensures you’re targeting elements that are actually present in the component’s view—critical for conditional rendering scenarios like your login-based menu.

3. Check angular-cli.json for Missing Scripts #

From your partial config snippet, verify that any third-party scripts required for your menu (like jQuery, Bootstrap JS, or custom menu libraries) are included in the scripts array of your app configuration. For example:

"apps": [
  {
    "root": "src",
    "outDir": "dist",
    "scripts": [
      "../node_modules/jquery/dist/jquery.min.js",
      "../node_modules/bootstrap/dist/js/bootstrap.min.js",
      // Add your custom menu script path here if needed
    ],
    // Other config properties...
  }
]

If a required script is missing, your menu logic will fail once the component loads post-login.

4. Verify Component Declaration and State Management #

• Make sure your SidebarComponent is properly declared in the Angular module where it’s used (add it to the declarations array). If it’s in a shared module, ensure the module is imported into your main app module.
• If you’re using a service to track login state (e.g., AuthService), confirm that the isLoggedIn observable/boolean is correctly updating and triggering change detection. You can use ChangeDetectorRef manually if needed:

import { ChangeDetectorRef } from '@angular/core';

constructor(private cdr: ChangeDetectorRef, private authService: AuthService) {}

ngOnInit(): void {
  this.authService.isLoggedIn$.subscribe(loggedIn => {
    this.isLoggedIn = loggedIn;
    // Trigger change detection if needed
    this.cdr.detectChanges();
  });
}

5. Check Browser Console for Errors #

Open your browser’s developer tools (F12) and go to the Console tab. Look for errors like:

• Cannot read property 'addEventListener' of null (your element isn’t present when the script runs)
• ReferenceError: $ is not defined (jQuery isn’t loaded)
  These errors will directly point you to the root cause.

内容的提问来源于stack exchange，提问作者Alexander Furtado Oliveira