Zoeken op website

angular - Geen NgModule-metadata gevonden voor 'AppModule' met webpack AngularCompilerPlugin

BIJWERKEN :

Wat betreft "ERROR in Error: No NgModule metadata found for 'AppModule'." denk ik dat dit een apart probleem is, maar voor het geval het iemand kan helpen. Ik ontdekte dat onder bepaalde omstandigheden die het gebruik van de AngularCompilerPlugin omvatten (wat ook de ng CLI impliceert), deze fout kan optreden als je het relevante gedeelte van je main.ts op deze manier declareert:

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Houd er rekening mee dat hoewel het volgende zou moeten precies hetzelfde betekenen, de volgende manier van het aanroepen van bootstrapModule dit probleem in sommige gevallen voor mij heeft opgelost:

platformBrowserDynamic().bootstrapModule(AppModule);

Samenvatting

Het bouwen van een Angular-toepassing met Webpack wanneer de ingangstoepassing zich niet in dezelfde map bevindt als de Angular-installatie, kan de AngularCompilerPlugin de @NgModule-decorator niet vinden.

Versies

Angular CLI: 1.6.3
Node: 8.9.1
OS: darwin x64
Angular: 5.1.3
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, platform-server, router

@angular/cli: 1.6.3
@angular-devkit/build-optimizer: 0.0.36
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.42
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.3
@schematics/angular: 0.1.11
@schematics/schematics: 0.0.11
typescript: 2.4.2
webpack: 3.10.0

Reproductiestappen

We hebben een reeks apps die afhankelijk zijn van een gemeenschappelijke kern van node_modules en andere assets. Onze bestandsstructuur is grofweg als volgt georganiseerd:

project
└───app1
│   │   package.json
│   │   tsconfig.json
│   │   ...
│   └───src
│   └───node_modules
└───app2
│   │   package.json
│   │   tsconfig.json
│   │   ...
│   └───src
│   └───node_modules
└───commons
│   │   package.json
│   │   tsconfig.base.json
│   │   ...
│   └───assets
│   └───node_modules
│   └───angular-commons
│       │   tsconfig.json
│       │   CommonModule.ts
│       │   lib.ts
│       │   ...

Waar alle gedeelde node_modules en andere bronnen in commons staan, en alleen node_modules die uniek zijn voor een bepaalde app in zijn eigen directory staan. We zijn bezig met het adopteren van Webpack vanwege de vele voordelen die het biedt, niet het minst van alles de AngularCompilerPlugin. Ik kan onze build laten werken zoals verwacht zolang de submodules subdirectories van de builddirectory zijn en de builddirectory alle gemeenschappelijke node_modules huisvest (bijv. Angular). Hoewel dit een mogelijke oplossing is, stelt onze voorkeur ons in staat om onze huidige directorystructuur te behouden. Helaas is dit waar ik tegen problemen aanloop.

Zodra de submappen de root van de buildmap verlaten, krijg ik problemen met de AngularCompiler. In mijn huidige setup ontvang ik het volgende bericht van een webpack-build: ERROR in Error: Geen NgModule-metadata gevonden voor 'AppModule'. Dit suggereert voor mij dat de AngularCompiler de NgModule-decorator niet succesvol vindt, aangezien Webpack anders succesvol door de boom van de applicatie lijkt te lopen. Ik heb geprobeerd het te verwijzen naar de juiste locatie om de NgModule te vinden, zowel met de optie mainPath als de optie entryModule. Dit heeft ertoe geleid dat ik de configuratieopties van AngularCompilerPlugin en het specifieke padgedrag van TypeScript, zowel bij "moduleResolution": "node" als "moduleResolution": "classic", nauwkeurig heb onderzocht en heb geëxperimenteerd met een aantal verschillende configuraties en mappenstructuren. In elk geval leek de enige werkende structuur het maken van de root build-map als de rootmap voor @angular en onze apps te zijn. Het is hier de moeite waard op te merken dat de moeilijkheden bij het specificeren waar Angular moet zoeken naar zijn paden/afhankelijkheden hetzelfde waren dat ons wegdreef van het gebruik van de Angular-compiler, waarvan ik begrijp dat deze Webpack omsluit.

Ik heb geprobeerd dit gedrag te reproduceren in een zelfstandige repository, en kwam een andere reeks problemen tegen die mogelijk gerelateerd zijn. De repository vertoont enkele overeenkomsten met ons project. In dit geval faalt de build echter bij app.module.ngfactory, omdat @angular/common niet kan worden gevonden. Om ambiguïteiten in de paden bij de TypeScript-moduleresolutie te verwijderen, heb ik directe relatieve imports gebruikt naar de juiste node_modules. Ik vermoed dat de padproblemen in deze voorbeeldrepository gerelateerd zijn aan de problemen die we in ons project zien, ook al komen ze op een andere manier tot uiting. Alle hulp bij het oplossen van dit probleem zou zeer op prijs worden gesteld.

  • git clone --recursive -j8 https://github.com/mscottnelson/ngWebpackCompile.git
  • cd ngWebpackCompile/commons
  • npm install
  • npm run watch:app1

Waargenomen gedrag

ERROR in Error: No NgModule metadata found for 'AppModule'.
    at NgModuleResolver.resolve (/Users/me/project/commons/node_modules/@angular/compiler/bundles/compiler.umd.js:20276:23)
    at CompileMetadataResolver.getNgModuleMetadata (/Users/me/project/commons/node_modules/@angular/compiler/bundles/compiler.umd.js:15229:60)
    at visitLazyRoute (/Users/me/project/commons/node_modules/@angular/compiler/bundles/compiler.umd.js:31090:104)
    at AotCompiler.listLazyRoutes (/Users/me/project/commons/node_modules/@angular/compiler/bundles/compiler.umd.js:31058:20)
    at AngularCompilerProgram.listLazyRoutes (/Users/me/project/commons/node_modules/@angular/compiler-cli/src/transformers/program.js:156:30)
    at Function.NgTools_InternalApi_NG_2.listLazyRoutes (/Users/me/project/commons/node_modules/@angular/compiler-cli/src/ngtools_api.js:44:36)
    at AngularCompilerPlugin._getLazyRoutesFromNgtools (/Users/me/project/commons/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:248:66)
    at Promise.resolve.then.then (/Users/me/project/commons/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:562:50)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
    at Function.Module.runMain (module.js:678:11)
    at startup (bootstrap_node.js:187:16)
    at bootstrap_node.js:608:3

Gewenst gedrag

Sta de AngularCompiler toe om geconfigureerd te worden om apps te compileren die zich in een andere directory bevinden dan de directory waar de Angular-compiler en de bijbehorende afhankelijkheden zijn geïnstalleerd.

Vermeld eventuele andere details die nuttig kunnen zijn

Ik kan de applicaties succesvol bouwen en uitvoeren met een directorystructuur zoals de onderstaande:

project
└───commons
│   │   package.json
│   │   tsconfig.base.json
│   │   ...
│   └───assets
│   └───node_modules
│   └───angular-commons
│       │   tsconfig.json
│       │   CommonModule.ts
│       │   lib.ts
│       │   ...
│   └───app1
│   │   │   package.json
│   │   │   tsconfig.json
│   │   │   ...
│   │   └───src
│   │   └───node_modules
│   └───app2
│   │   │   package.json
│   │   │   tsconfig.json
│   │   │   ...
│   │   └───src
│   │   └───node_modules