Lösen

Dieser Artikel zielt darauf ab, den NG2008 -Kompilierungsfehler zu beheben, der in Winkelanwendungen auftritt, wenn TypeScript -Variablen in Komponentenvorlagen auf statische Ressourcen (z. B. CSS, JS) verweisen. Wir werden den Grund für diesen Fehler untersuchen, nämlich den statischen Pfadauflösungsmechanismus des Winkelkompilers, und eine professionelle Lösung für die zentrale Verwaltung globaler statischer Ressourcen für index.html bereitstellen, wobei die Notwendigkeit der Verwendung relativer Pfade unterstreicht, um die Richtigkeit und Effizienz der Anwendungskompilierung und -betrieb zu gewährleisten.

In der Entwicklung von Angular Application versuchen Entwickler manchmal, sich dynamisch auf externe CSS -Stylesheets oder JavaScript -Skriptdateien in den HTML -Vorlagen der Komponente durch Datenbindung zu beziehen (z. B. {{Variable}}). Wenn diese Referenzen jedoch das HREF-Attribut des -Tags oder das SRC-Attribut des <script> -Tags beinhalten, begegnen Sie normalerweise auf einen Kompilierungs-Zeit-Fehler: NG2008: konnte Stylesheet-Datei nicht finden. Dies zeigt an, dass Angulars Compiler den erwarteten statischen Ressourcenpfad während der Kompilierungsphase nicht aufrichten kann.</script>

Verstehen Sie die Gründe für NG2008 -Kompilierungsfehler

Der NG2008-Fehler ist eine Warnung, die bei der Bearbeitung von Vorlagen von Angulars präsentiertem (AOT) -Kompiler ausgestellt wird. Die AOT -Kompilierung erfolgt, bevor der Browser die Anwendung lädt, die Winkelvorlagen und Komponenten in einen effizienten JavaScript -Code kompilt. Während dieser Kompilierungsphase muss der Compiler in der Lage sein, alle referenzierten externen Ressourcenpfade für Optimierung und Überprüfung statisch analysieren zu können.

Wenn Sie versuchen, Variablen wie {{Host}} in der Komponentenvorlage zu verwenden, um die HREF/SRC -Attribute des oder <script> -Tags zu erstellen, entsteht das Problem:</script>

1. Kompilierzeit- und Laufzeitdifferenz: {{Host}} ist die Datenbindungssyntax von Angular, die analysiert und durch den tatsächlichen Wert der Variablen nur zur Laufzeit ersetzt wird. Der AOT -Compiler muss jedoch die vollständigen und genauen Wege dieser statischen Ressourcen zur Kompilierung kennen. Es kann den TypeScript -Code nicht ausführen, um den Wert der Hostvariablen zu erhalten. Daher kann er den richtigen Ressourcenpfad während der Kompilierungsphase nicht analysieren, was zu einem NG2008 -Fehler führt.
2. HTML -Strukturspezifikation: Winkelkomponentenvorlagen enthalten normalerweise nur teilweise Inhalt der Seite und sollten keine vollständigen HTML -Dokumentstrukturen enthalten, wie z. B. , oder -Tags. Diese globalen Tags und globalen Ressourcen (z. B. öffentliche CSS -Bibliotheken, globale JS -Bibliotheken) sollten im Eintragsdatei index.html der Anwendung zentral verwaltet werden. Wenn Sie diese globalen Ressourcen in Komponentenvorlagen einsetzen, verstößt nicht nur vor Best Practices, sondern kann auch zu unerwarteten Verhaltens- oder Kompilierungsproblemen führen.

Lösung: Zentral verwalten globale statische Ressourcen in index.html

Die Möglichkeit zur Behebung von NG2008 -Fehlern und zur Befolgung von Winkel -Best Practices besteht darin, alle globalen statischen Ressourcen (wie Bootstrap -CSS, JQuery JS usw.) im Eintragsdatei -Index.html der Angularanwendung zu platzieren.

Index.html ist die Hostseite der Winkelanwendung, die für das Laden der Winkelanwendung selbst verantwortlich ist und die von der Anwendung erforderlichen globalen Stile und Skripte vorladen kann. In Index.html können Sie diese Ressourcen direkt mit den Pfaden in Bezug auf das Stammwurzel der Anwendung beziehen.

Beispiel: Richtige Referenz der statischen Ressourcen

Nehmen wir an, Ihre Projektstruktur lautet wie folgt:

 Dein-Winkel-App/
├── src/
│ ├── Vermögen/
│ │ ├── vorne/
│ │ │ ├── CSS/
│ │ │ └── Bootstrap.min.css
│ │ └── js/
│ │ └── jQuery-3.6.0.min.js
│ ├── App/
│ └── Komponente/
│ └── vorne/
│ └── Front-Layout/
│ │ ├── Front-Layout.comPonent.ts
│ └── Front-Layout.comPonent.html
│ └── Index.html
└── ...

1. Modify index.html

Entfernen Sie alle Tags für globale und <script> aus der Komponentenvorlage und fügen Sie sie in die Datei src/index.html hinzu. Bitte verwenden Sie den Pfad relativ zu index.html.</script>

 

<kopf>
  <meta charset="utf-8">
  <title> Ihre Winkel -App </title>
  <basis href="/">
  <meta name="viewPort" content="width = Gerätebidth, initial-scale = 1">
  <link rel="icon" type="Image/x-icon" href="favicon.ico">

  
  <link rel="stylesheet" href="./%20assets/vorne/css/bootstrap.min.css">
  
  ->


  <app-root> </app-root> 

  
  <script src="./%20assets/vorne/js/jquery-3.6.0.min.js"> </script>
  

</basis></kopf>

2. Vereinfachen Sie Front-Layout.comPonent.html

Da die globale Ressource auf index.html verschoben wurde, muss die Komponentenvorlage diese Referenzen nicht mehr enthalten, noch sollte sie Tags wie , , usw. enthalten.

 <div class="Main-Wrapper">
    <router-outlet> </router-outlet>
</div>

3.. Entfernen Sie unnötige Variablen in Front-Layout.comPonent.ts.ts

Jetzt wird die Hostvariable nicht mehr verwendet, um statische Ressourcenpfade zu erstellen, und wenn sie keinen anderen Zweck hat, kann sie entfernt werden.

 import {component, oninit} aus '@angular/core';

@Komponente({
  Selektor: 'App-Front-Layout',
  templateurl: './front-layout.component.html',,
  Styleurls: ['./Front-Layout.comPonent.css']
})
Exportklasse FrontLayoutComponent -Geräte auf Ininit {

  // Host: Any; // Wenn es nicht mehr benötigt wird, können Sie Constructor () {} entfernen

  ngoninit (): void {
    // this.host = "http: // localhost: 4200"; // Wenn es nicht mehr benötigt wird, können Sie entfernen}

}

Notizen und Zusammenfassung

1. Pfadauflösung: In index.html ist der Pfad relativ zum Index.html -Datei selbst oder Basis HREF (normalerweise /) analysiert. .
2. Sicherheit der Kompilierungszeit: Einlegen statischer Ressourcenreferenzen in Index.html stellt sicher, dass der Angular-Compiler diese Ressourcen während der Build-Phase korrekt identifizieren und verarbeiten kann, wodurch NG2008-Fehler vermieden werden.
3. Trennung der Verantwortlichkeiten: Index.html ist für die Gesamtstruktur der Anwendung und der globalen Ressourcenbelastung verantwortlich, während sich Komponentenvorlagen auf die Rendern ihrer spezifischen UI -Teile konzentrieren. Diese Trennung macht den Code klarer und leichter zu warten.
4. Ausnahmen von dynamischen Pfaden: Obwohl die HREF/SRC -Attribute von und <script> Tags zur Kompilierung statische Pfade benötigen, können Sie in einigen Fällen die Datenbindung verwenden, um die Pfade dynamisch festzulegen, z. B.:<ul><li> Das [SRC] -Merkmal des <img alt="Lösen" > -Tag (Bildpfad ist zur Laufzeit geladen).</script>
5. Das [HREF] -Merkmal des Tags (Linkadresse wird zur Laufzeit generiert).
6. Dynamisch geladene Module oder Komponenten (durch faules Laden oder Loadchildren).
7. CSS -Stile wie Hintergrundbilder können über [NGStyle] oder CSS -Variablen dynamisch festgelegt werden. Diese Szenarien unterscheiden sich jedoch von den Kompilierungszeitanforderungen für die globale statische Ressourcenbelastung.

Durch die Befolgung dieser Best Practices können Sie NG2008-Kompilierungsfehler, die durch statische Ressourcenreferenzen in Angular verursacht werden, effektiv beheben und eine robustere und spezifizierendere Winkelanwendung aufbauen.

Das obige ist der detaillierte Inhalt vonLösen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!