导入自定义模块 [Angular 11] 时出现“无法读取未定义的属性‘ɵmod’”

问题描述 投票:0回答:10

我正在尝试制作一个自定义模块来保存我的所有 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 的新手。

javascript angular
10个回答
11
投票

我遇到了同样的错误,但最终发现我的延迟加载脚本是错误的, 这就是我所拥有的:

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)

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


5
投票

只需退回模块即可。

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

2
投票

我就是这样做的

{
 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;
    })
},

1
投票

从 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) )
  • 这有助于更好地查看根本错误原因

0
投票

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

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

更改为:

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

我会调查为什么会发生这种情况,但对我来说效果很好,我希望有帮助


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

如果你使用 Angular Universal 并使用“ngserve”提供 Angular 存储库,然后添加到评论initialNavigation,它对我有用


0
投票

要完成可能发生此错误的原因的答案列表,请参阅此问题和答案

我总结这个问题的原因是您的主存储库中的包不完整或错误上传。

以我为例,

esm2015
fesm2015
文件夹已丢失。


0
投票

好的,我回答这个问题只是为了以防万一有人在这个线程上并使用 Angular NRWL / Nx 收到问题中提到的错误并创建了组件库,尝试在 mono-repo 工作区之外使用该库

发生这种情况的原因是,默认情况下创建的库是不可发布的,我犯了这个错误。一旦包发布到 dist 文件夹中,它应该包含以下文件夹:bundle、esm2015、fesm2015 和 lib。如果您没有看到这些文件夹,则意味着您的库不可发布。

如果您已经创建了库并且想要使其可发布,则需要在 angular.json 文件中进行以下更改。

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

重建你的库并检查你的 dist 文件夹,如果你看到你的包有这些文件夹:bundle、esm2015、fesm2015 和 lib,这意味着你的包现在可以发布了。如果要将包发布到自己的包存储库,请指定 .npmrc 文件,执行 npm 发布并将其安装在目标应用程序中。它应该有效。

详情请阅读:

https://nx.dev/struct/buildable-and-publishable-libraries

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


0
投票

当我将 Angular 应用程序中的方法从模块更改为独立组件时,我就遇到过这种情况。之后,我在两个组件之间存在循环依赖关系,由于某种原因,它返回了这个隐式错误(也许它不是显式的,因为它是在执行单元测试期间发生的)。如果您引入桶装出口,也可能会发生同样的情况。


-1
投票

模块中很可能存在问题,但被隐藏为内部异常。如果运行 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
  ],

© www.soinside.com 2019 - 2024. All rights reserved.