angular - ไม่พบเมตาดาต้า NgModule สำหรับ 'AppModule' กับ webpack AngularCompilerPlugin

อัปเดต :

เกี่ยวกับ "ERROR in Error: No NgModule metadata found for 'AppModule'." ฉันเชื่อว่านี่เป็นปัญหาแยกต่างหาก แต่เผื่อว่าจะช่วยใครได้บ้าง ฉันพบว่าในบางเงื่อนไขที่รวมถึงการใช้ AngularCompilerPlugin (ซึ่งยังเกี่ยวข้องกับ ng cli) ข้อผิดพลาดนี้อาจเกิดขึ้นได้หากคุณประกาศส่วนที่เกี่ยวข้องของ main.ts ของคุณในลักษณะนี้:

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

โปรดทราบว่าแม้ว่าข้อความต่อไปนี้ ควร จะมีความหมายเหมือนกัน แต่วิธีการเรียก bootstrapModule ดังต่อไปนี้แก้ปัญหานี้ให้ผมในบางสถานการณ์:

platformBrowserDynamic().bootstrapModule(AppModule);

สรุป

การสร้างแอป Angular ด้วย Webpack เมื่อแอปพลิเคชันเริ่มต้นไม่ได้อยู่ในไดเรกทอรีเดียวกับการติดตั้ง Angular จะทำให้ AngularCompilerPlugin ไม่พบตัวตกแต่ง @NgModule

เวอร์ชัน

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

ขั้นตอนการทำซ้ำ

เรามีชุดแอปที่ขึ้นอยู่กับโค้ร์ร่วมของ node_modules และทรัพยากรอื่น ๆ โครงสร้างไฟล์ของเราจัดเรียงคร่าว ๆ ดังนี้:

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
│       │   ...

ทุก ๆ node_modules ที่ใช้ร่วมกันและทรัพยากรอื่น ๆ จะอยู่ใน commons และมีเพียง node_modules ที่เฉพาะเจาะจงสำหรับแอปนั้น ๆ เท่านั้นที่จะอยู่ในไดเรกทอรีของตนเอง เรากำลังอยู่ในขั้นตอนการนำ Webpack มาใช้เพราะประโยชน์มากมายที่มันนำมาให้ หนึ่งในนั้นคือ AngularCompilerPlugin ผมสามารถทำให้กระบวนการสร้างงานของเราทำงานได้ตามที่คาดหวังตราบใดที่ซับโมดูลเป็นไดเรกทอรีย่อยของไดเรกทอรีการสร้างงานและไดเรกทอรีการสร้างงานบรรจุ node_modules ที่ใช้ร่วมกันทั้งหมด (เช่น Angular) แม้ว่านี่จะเป็นวิธีแก้ปัญหาที่เป็นไปได้ แต่แนวทางที่เราต้องการช่วยให้เรารักษาโครงสร้างไดเรกทอรีปัจจุบันของเราได้ น่าเสียดาย นี่คือที่ที่ผมกำลังเจอปัญหา

ทันทีที่โฟลเดอร์ลูกออกจากรากของไดเรกทอรีการสร้าง ฉันเจอปัญหากับ AngularCompiler ในการตั้งค่าปัจจุบัน ฉันได้รับข้อความดังต่อไปนี้จากการสร้าง webpack: ERROR in Error: No NgModule metadata found for 'AppModule' สิ่งนี้แสดงให้ฉันเห็นว่า AngularCompiler ไม่สามารถหาตัวประดับ NgModule ได้สำเร็จ เนื่องจาก Webpack ดูเหมือนจะสามารถเคลื่อนที่ผ่านโครงสร้างของแอปพลิเคชันได้สำเร็จในทางอื่น ๆ ฉันได้พยายามชี้ไปยังตำแหน่งที่ถูกต้องเพื่อหาตัว NgModule โดยใช้ตัวเลือก mainPath และ entryModule ทั้งสองตัวเลือก ซึ่งทำให้ฉันต้องตรวจสอบตัวเลือกการกำหนดค่าของ AngularCompilerPlugin อย่างละเอียดรวมถึงพฤติกรรมการกำหนดเส้นทางของ TypeScript ในทั้ง "moduleResolution": "node" และ "moduleResolution": "classic" และทดลองกับการกำหนดค่าและโครงสร้างไดเรกทอรีที่แตกต่างกันหลายรูปแบบ ในทุกกรณี โครงสร้างที่ใช้งานได้เพียงอย่างเดียวดูเหมือนจะเป็นการทำให้โฟลเดอร์ build หลักเป็นโฟลเดอร์หลักสำหรับ @angular และแอปของเราด้วย การสังเกตที่ควรกล่าวถึงที่นี่คือ ความยากลำบากในการระบุว่า Angular ควรมองหาการจัดเส้นทาง/การพึ่งพาของมันที่ไหน เป็นสิ่งเดียวกันที่ทำให้เราหันหลังจากการใช้ Angular compiler ซึ่งฉันเข้าใจว่า compiler นั้นห่อหุ้ม Webpack อยู่

ฉันพยายามทำซ้ำพฤติกรรมนี้ในรีโปแบบสแตนด์อโลน และเจอชุดปัญหาที่ต่างออกไปซึ่งอาจเกี่ยวข้อง รีโปนี้มีความคล้ายคลึงกับโปรเจคของเรา ในกรณีนี้ อย่างไรก็ตาม การสร้างล้มเหลวที่ app.module.ngfactory ไม่สามารถหา @angular/common ได้ เพื่อกำจัดความไม่ชัดเจนของเส้นทางในการแก้ไขโมดูล TypeScript ฉันจึงใช้การนำเข้าที่สัมพันธ์โดยตรงไปยัง node_modules ที่เหมาะสม ฉันสงสัยว่าปัญหาเส้นทางในรีโปตัวอย่างนี้อาจเกี่ยวข้องกับปัญหาที่เราเห็นในโปรเจคของเรา แม้ว่าจะปรากฏแตกต่างกัน ความช่วยเหลือใด ๆ ในการแก้ไขปัญหานี้จะได้รับการชื่นชมอย่างมาก

git clone --recursive -j8 https://github.com/mscottnelson/ngWebpackCompile.git

```
cd ngWebpackCompile/commons
```
```
npm install
```
```
npm run watch:app1
```

พฤติกรรมที่สังเกตได้

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

พฤติกรรมที่ต้องการ

อนุญาตให้ AngularCompiler ถูกกำหนดค่าเพื่อคอมไพล์แอปพลิเคชันที่อยู่ในไดเรกทอรีที่ต่างจากไดเรกทอรีที่ติดตั้ง Angular compiler และ dependencies ของมัน

ระบุรายละเอียดอื่น ๆ ที่อาจเป็นประโยชน์

ฉันสามารถสร้างและเรียกใช้งานแอปพลิเคชันได้สำเร็จโดยใช้โครงสร้างไดเรกทอรีแบบด้านล่างนี้:

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