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

Question

我正在尝试制作一个自定义模块，用于保存所有的 UI 组件，您可以在此处找到它：dawere-uic

它经过编译，并且在 storybook 上运行得非常好，每个 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。

- Portujua

Answer 1

我遇到了相同的错误，但最终发现我的懒加载脚本有问题， 这就是我原来的代码:

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)

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

- ebed meleck

Answer 2

只需简单地返回该模块即可。

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

- Tushar Gujrathi

---

你能再具体一些吗？我们需要在哪里添加这个东西？ - Cocorico

这在哪个文件中找到的？ - jhorton

Answer 3

我是这样做的。

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

- Muhammad Umar

Answer 4

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

当路由器捕获到块加载错误时，会防止出现以下错误： main.js:21895 Error: Uncaught (in promise): ChunkLoadError: Loading chunk module-name failed.

通过在具有惰性加载模块的路由器中执行类似以下操作可以实现此目标：

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

• 这有助于更好地查看根本错误原因

- Andrei Diaconescu

---

.catch(err => { console.log('哦不！', err); return err; } ) 这样做可以消除错误，即使我将其删除后也没有出现错误。哈哈 xD - danish ali

Answer 5

好的，我回答这个问题，以防有人在这个线程中遇到了使用Angular NRWL / Nx创建组件库，在单体库工作区外部使用该库时出现的错误。

发生这种情况的原因是，默认情况下创建的库是不可发布的，我犯了这个错误。一旦包被发布到dist文件夹中，它应该有这些文件夹bundles、esm2015、fesm2015和lib。如果你没有看到这些文件夹，那就意味着你的库不能被发布。

如果你已经创建了你的库并希望将其发布，你需要在你的angular.json文件中进行以下更改。

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

重新构建您的库并检查dist文件夹，如果您看到您的包具有这些文件夹bundles、esm2015、fesm2015和lib，那么您的包现在是可发布的。如果您要将包发布到自己的包存储库，请指定.npmrc文件，然后执行npm publish并在目标应用程序中安装它。它应该可以工作。

详情请阅读：

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

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

- ATHER

Answer 6

我也遇到了同样的错误，在我的自定义模块中，我更改了导入声明：

之前的声明：

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

更改为：

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

我会调查为什么会发生这种情况，但对我来说一切都正常，希望有所帮助。

- Zeno Franca Junior

---

'../base-chart/base-chart.module'; 如果我从node_modules文件夹加载该模块，这是行不通的。 - ATHER

Answer 7

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

如果您使用Angular Universal并使用“ng serve”服务Angular存储库，则添加注释initialNavigation，这对我很有效。

- Emil Alisgandarov

Answer 8

为了完整列出此错误可能发生的原因清单，请参阅问题和答案。

总之，这个问题的原因是您的主要存储库中上传的软件包不完整或错误。

例如，在我的情况下，缺少了esm2015和fesm2015文件夹。

- Christian

Answer 9

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

- baumsystems