如何在Angular 13项目中引入JavaScript文件？——Visual Studio模板迁移后JS代码失效问题咨询

Hey there, let's get that spinner JavaScript code working in your Angular 13 project. Since your code relies on jQuery, I'll walk you through a few solid approaches—including a jQuery-free method that's more Angular-friendly:

Solution 1: Global Script Inclusion (For Wide-Spread Use) #

If you plan to use this spinner (or other jQuery-based code) across multiple components, setting up global imports is the way to go:

1. Install jQuery and its TypeScript types (since Angular uses TypeScript, we need type declarations to avoid errors):

   npm install jquery --save
   npm install @types/jquery --save-dev
   

2. Add scripts to your angular.json (this tells Angular to load these files globally):
   Open your project's angular.json, find the architect > build > options > scripts array, and add these entries:

   "scripts": [
     "node_modules/jquery/dist/jquery.min.js",
     "src/assets/js/spinner.js" // Save your spinner code in this file first
   ]
   

   Note: Create the src/assets/js folder if it doesn't exist, then paste your spinner code into spinner.js.

3. Update tsconfig.json (to let TypeScript recognize jQuery):
   In tsconfig.json, add "jquery" to the compilerOptions > types array:

   "compilerOptions": {
     // ... other settings
     "types": ["jquery"]
   }
   

4. Restart your Angular dev server—changes to angular.json require a restart to take effect.

Solution 2: Component-Level Integration (Only For This Component) #

If the spinner is only needed in app.component, you can load the code directly in the component:

1. Install jQuery and types (same as Step 1 in Solution 1):

   npm install jquery --save
   npm install @types/jquery --save-dev
   

2. Modify app.component.ts:
   Use the ngAfterViewInit lifecycle hook (to ensure the DOM is fully loaded before accessing elements) and wrap your spinner code inside it:

   import { Component, AfterViewInit } from '@angular/core';
   declare var $: any; // Declare jQuery to avoid TypeScript errors
   
   @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css']
   })
   export class AppComponent implements AfterViewInit {
     ngAfterViewInit(): void {
       // Your spinner code here
       (function ($) { 
         "use strict"; 
         var spinner = function () { 
           setTimeout(function () { 
             if ($('#spinner').length > 0) { 
               $('#spinner').removeClass('show'); 
             } 
           }, 1); 
         }; 
         spinner();
       })(jQuery);
     }
   }
   

Solution 3: Angular-Native Approach (Recommended, No jQuery Needed) #

Angular has built-in tools to manipulate the DOM without relying on jQuery. This is the cleanest approach for Angular projects:

1. Add a template reference to your spinner in app.component.html:

   <div #spinnerElement id="spinner" class="show">
     <!-- Your spinner content here -->
   </div>
   

2. Modify app.component.ts to use Angular's ViewChild and native DOM methods:

   import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
   
   @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css']
   })
   export class AppComponent implements AfterViewInit {
     @ViewChild('spinnerElement') spinnerElement!: ElementRef;
   
     ngAfterViewInit(): void {
       setTimeout(() => {
         if (this.spinnerElement.nativeElement) {
           this.spinnerElement.nativeElement.classList.remove('show');
         }
       }, 1);
     }
   }
   

Quick Troubleshooting Tips #

• Double-check that the #spinner (or #spinnerElement) DOM element exists in app.component.html—if it's missing, the code won't find it.
• If you're using global scripts, make sure the file paths in angular.json are correct relative to your project root.
• Always use ngAfterViewInit instead of ngOnInit when manipulating DOM elements—ngOnInit runs before the component's DOM is fully rendered.

内容的提问来源于stack exchange，提问作者BADR_ Ah