導入自定義模塊 [Angular 11] 時出現“無法讀取未定義的屬性‘ɵmod’”

Question

我正在嘗試制作一個包含我所有 UI 組件的自定義模塊，您可以在這里找到它： dawere-uic

它編譯並且與我的故事書一起工作時就像一個魅力，每個 UI 組件都在工作。 問題是當我嘗試在我的主項目中使用它時出現此錯誤：

Uncaught TypeError: Cannot read property 'ɵmod' of undefined
  at getNgModuleDef (core.js:1117)
  at recurse (core.js:25171)
  at recurse (core.js:25182)
  at registerNgModuleType (core.js:25167)
  at new NgModuleFactory$1 (core.js:25281)
  at compileNgModuleFactory__POST_R3__ (core.js:28915)
  at PlatformRef.bootstrapModule (core.js:29161)
  at Module.zUnb (main.ts:11)
  at __webpack_require__ (bootstrap:79)
  at Object.0 (main.js:11)

當我將它導入 app.module 時，它就會發生。 誰能告訴我我做錯了什么？ 我認為值得一提的是我是 Angular 的新手。

Answer 1

只需返回模塊即可。

 {
    path: 'auth',
    loadChildren: () =>
      import('./auth/auth.module')
        .then((a) => {
          return a.AuthModule;
        });
  },

Answer 2

模塊中很可能有問題，但被隱藏為內部異常。 如果你運行 npm run dev:ssr，你應該可以看到錯誤。 就我而言，這是因為我這樣聲明了我的 AppRoutingModule。

 export const appRoutingModule = RouterModule.forRoot(routes);

我改成了

 @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule], }) export class AppRoutingModule {}

並像這樣將其導入 app.module.ts

 @NgModule({ imports: [ AppRoutingModule, ....other imports ],

Answer 3

我得到了同樣的錯誤，但最終發現我的延遲加載腳本是錯誤的，這就是我所擁有的，path: 'modulePath', loadChildren: () => import ('./exemple-module/exemple-module.module' ）。 然后 (m => {m.exemple-module}) 這應該是路徑：'modulePath', loadChildren: () => import ('./exemple-module/exemple-module.module')。 然后（m => m.exemple-module），我沒有返回箭頭 function 中的模塊。 不確定這是否有幫助，但這是我遇到的問題以及我如何解決它

Answer 4

同樣的錯誤在這里，我的情況是我在我的自定義模塊中更改了導入聲明：之前：

`import { BaseChartModule, SortModule } from '@pure-components';`

變成：

import { BaseChartModule } from '../base-chart/base-chart.module';

我會調查為什么會發生這種情況，但對我來說效果很好，我希望這會有所幫助

Answer 5

從 Github 復制： https://github.com/angular/angular/issues/36510#issuecomment-626455153

當在路由器中捕獲塊加載錯誤時可能會發生這種情況，從而防止此錯誤：main.js:21895 錯誤：未捕獲（在承諾中）：ChunkLoadError：加載塊模塊名稱失敗。

這可以通過在帶有延遲加載模塊的路由器中執行以下操作來實現：

loadChildren: () => import('module/path').then(m => m.myModule).catch( err => console.log('Oh no!', err) )

• 這有助於更好地查看根本錯誤原因

Answer 6

我是這樣做的

{
 path: 'doctor',
 loadChildren: () => 
   import('./doctor/doctor.module')
   .then((m) => {m.DoctorModule;})
}

這在以前的項目中對我有用，但這次沒有用。 現在我在“then”中添加了 return，並且得到了預期的結果

{
  path: 'doctor',
  loadChildren: () =>
    import('./doctor/doctor.module')
    .then((m) => {
      return m.DoctorModule;
    })
},

Answer 7

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    // initialNavigation: 'enabled',
    scrollPositionRestoration: 'top'
  })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

如果您使用 Angular Universal 並使用“ng serve”服務 angular repo 然后添加到評論 initialNavigation，它適用於我

Answer 8

要完成可能出現此錯誤的答案列表，請參閱此問題和答案。

我總結此問題的原因是您的主存儲庫中的 package 不完整或錯誤上傳。

例如，在我的情況下， esm2015和fesm2015文件夾已丟失。

Answer 9

好的，我正在回答這個問題，以防萬一有人在這個線程上，並使用 Angular NRWL / Nx 得到問題中提到的錯誤，並創建了組件庫，試圖在 mono-repo 工作空間之外使用該庫

它發生的原因是，默認情況下正在創建的庫是不可發布的，我犯了那個錯誤。 一旦 package 在 dist 文件夾中發布，它應該有這些文件夾包、esm2015、fesm2015 和 lib。 如果您沒有看到這些文件夾，則表示您的庫不可發布。

如果您已經創建了您的庫並希望使其可發布，則需要在 angular.json 文件中進行以下更改。

        <your-lib> --> architect --> build --> builder 
    change value from : @nrwl/angular:ng-packagr-lite to : @nrwl/angular:ng-packagr

重建你的庫並檢查你的 dist 文件夾，如果你看到你的 package 有這些文件夾包，esm2015，fesm2015 和 lib，這意味着你的 package 現在可以發布了。 如果要將 package 發布到自己的 package 存儲庫，請指定 .npmrc 文件，執行 npm 發布並將其安裝到目標應用程序中。 它應該工作。

詳情請閱讀：

https://nx.dev/structure/buildable-and-publishable-libraries和

https://angular.io/guide/angular-package-format