javascript 导入自定义模块时获取'Cannot read property ' mod' of undefined'[Angular 11]

lyfkaqu1  于 2023-05-16  发布在  Java
关注(0)|答案(9)|浏览(179)

我正在尝试制作一个自定义模块来保存我所有的UI组件,你可以在这里找到它:dawere-uic
它编译和它的工作就像一个魅力与故事书我有它,每个用户界面组件是工作。问题是,当我尝试在我的主项目中使用它时,我得到了这个错误:

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的新手。

ewm0tg9j

ewm0tg9j1#

我得到了同样的错误,但最终发现我的lazy load脚本是错误的,这就是我所拥有的:

path: 'modulePath', loadChildren: () => import ('./exemple-module/exemple-module.module').then (m => { m.exemple-module })

这才是它本来应该有的样子:

path: 'modulePath', loadChildren: () => import ('./exemple-module/exemple-module.module').then (m => m.exemple-module)

我没有返回箭头函数中的模块。不确定这是否有帮助,但这是我遇到的问题,也是我如何解决的

oknrviil

oknrviil2#

只需返回模块即可。

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

zbwhf8kr3#

我是这样做的

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

这在我以前的一个项目中是有效的,但这次却不起作用。现在我已经在“然后”中加入了回报,并且正在得到预期的结果

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

oalqel3c4#

复制自Github:https://github.com/angular/angular/issues/36510#issuecomment-626455153
当路由器中捕获块加载错误时,可能会发生这种情况,从而防止出现以下错误:错误:404错误:未捕获(承诺):ChunkLoadError:加载区块module-name失败。
这可以通过在具有延迟加载模块的路由器中执行以下操作来实现:

loadChildren: () => import('module/path').then(m => m.myModule).catch( err => console.log('Oh no!', err) )
  • 这有助于更好地了解错误的根本原因
eqfvzcg8

eqfvzcg85#

同样的错误在这里,在我的情况下,我改变了我的自定义模块的导入声明:之前:

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

变更为:

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

我会调查为什么会发生这种情况,但对我来说工作正常,我希望有帮助

yh2wf1be

yh2wf1be6#

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

如果你使用Angular Universal并使用“ng serve”服务angular repo,然后添加到注解initialNavigation,它对我有用

fcg9iug3

fcg9iug37#

要完成为什么会发生此错误的答案列表,请参阅此question and answer
我总结这个问题的原因是一个不完整的或错误上传的包在您的主存储库。
在我的例子中,esm2015fesm2015文件夹已经丢失。

rvpgvaaj

rvpgvaaj8#

好吧,我回答这个问题只是以防万一,如果有人在这个线程上,并得到问题中提到的错误使用Angular NRWL / Nx,并已创建组件库,试图使用该库以外的mono-repo工作区
发生这种情况的原因是,默认情况下,正在创建的库是不可发布的,我犯了这个错误。一旦包发布到dist文件夹中,它应该有这些文件夹bundles,esm 2015,fesm 2015和lib。如果您看不到这些文件夹,则表示您的库不可发布。
如果你已经创建了你的库,并且你想让它可发布,你需要在你的angular.json文件中做以下修改。

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

重建你的库并检查你的dist文件夹,如果你看到你的包有这些文件夹bundles,esm 2015,fesm 2015和lib,这意味着你的包现在可以发布了。指定.npmrc文件,如果您要将包发布到自己的包存储库,请执行npm发布并将其安装到目标应用程序中。应该能成功
详情请阅读:
https://nx.dev/structure/buildable-and-publishable-libraries
https://angular.io/guide/angular-package-format

x7rlezfr

x7rlezfr9#

最有可能的是模块中有错误,但被隐藏为内部异常。如果你运行npm run dev:ssr,你应该可以看到这个错误。在我的例子中,这是因为我像这样声明了我的AppRoutingModule。

export const appRoutingModule = RouterModule.forRoot(routes);

我改成了

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

export class AppRoutingModule {}

并像这样将其导入app.modul.ts中

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

相关问题