AOT-Compiler erzeugt falschen Import

Question

Ich habe ein Multi-App-Angular-Cli-Projekt mit Code-Sharing.

Grundsätzlich sieht die Struktur wie folgt vor:

• src - Haupt
  • app.component - Bootstrap-Komponente
  • app.module
  • geteilt - gemeinsame Anwendungsteile
    • demo.component
    • shared.module
• Verlängerung - zweite Anwendung sollten den wichtigsten
  • Extension- verlängern app.component - Bootstrap-Komponente
  • extension.module

SharedModule sowohl von AppModule und ExtensionModule importiert (was erklärt, und exportiert die DemoComponent) ist. DemoComponent wird dann den Vorlagen von AppComponent und ExtensionAppComponent hinzugefügt.

Alles funktioniert nur gut, wenn JIT-Compiler (ng serve, ng serve --app extension) verwenden, aber AOT-Compiler schlägt fehl sagen:

Can't resolve '../../../src/app/demo/demo.component.ngfactory'

in diese Suche erzeugte Datei auf GENDIR/app/demo/demo.component.ngfactory wir folgendes erhalten:

import * as i0 from './demo.component.css.shim.ngstyle'; 
import * as i1 from '@angular/core'; 
import * as i2 from './demo.component'; 

Der letzte Import ist der, der fehlschlägt, weil es keine 'demo.component' im Ordner GENDIR/app/demo gibt. Überraschenderweise existiert die Datei, die als i0 importiert wird, und enthält entsprechende Stile.

UPDATE: sieht aus wie das Problem ist in ngc. Es würde auch nicht funktionieren, wenn Sie einen paths Alias ​​in tsconfig.json hinzufügen. Es gibt ein paar Fragen darüber auf Github (https://github.com/angular/angular/issues/13487)

Answer 1

ich in ein ähnliches Problem heute lief, und ich war in der Lage, es zu lösen, indem sie meine tsconfig.app.json-Datei in einen Vorfahren Verzeichnis aller Code bewege ich verwenden wollte . Ich habe dann das include Array in meinem tsconfig.app.json geändert, um nur die sekundäre App einzuschließen.

HINWEIS: Ich verwendete eine einzelne .angular-cli.json konfiguriert, um mehrere Anwendungen zu erstellen. Wenn Sie mehrere Konfigurationen haben, Ihre Meilen

Für Ihr Beispiel variieren können, können Sie die folgende Struktur versuchen:

• < geordnete Verzeichnis >
  • src (Hauptanwendung)
    • app.component - Bootstrap Komponente
    • app.module
    • geteilt - shared Teile Anwendung
      • demo.component
      • shared.module
  • Verlängerung - zweite Anwendung soll die wichtigste
    • Ausfahrseite app.component verlängern - Bootstrap
    Komponente
    • extension.module
  • tsconfig.extension.json - App-spezifische tsconfig-Datei für Ihre Erweiterungsanwendung

In Ihrer tsconfig.extension.json Datei, fügen Sie einen Abschnitt umfassen:

... 
"include": [ 
    "./extension/**/*" 
] 
... 

Sie jede App in Ihrer .angular-cli.json Datei deklariert haben Angenommen, Sie werden auch die "tsconfig" Eigenschaft für Ihre Erweiterung Anwendung aktualisieren müssen:

"name": "extension", 
// Other configuration... 
"tsconfig": <insert path to tsconfig based on "root" here> 

READER PAßT Diese Struktur Art von Hack ist, und nicht offiziell unterstützt wird. Seien Sie nicht überrascht, wenn ein zukünftiges Update dazu führt, dass es auf sich selbst zusammenbricht!

Arbeiten an:

• Knoten: v8.4.0
• npm: 5.4.2
• @ Winkel/cli: 1.4.2