我正在尝试制作一个自定义模块来保存我的所有 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 的新手。
我遇到了同样的错误,但最终发现我的延迟加载脚本是错误的, 这就是我所拥有的:
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)
我没有在箭头函数中返回模块。 不确定这是否有帮助,但这就是我遇到的问题以及我是如何解决的
只需退回模块即可。
{
path: 'auth',
loadChildren: () =>
import('./auth/auth.module')
.then((a) => {
return a.AuthModule;
});
},
我就是这样做的
{
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;
})
},
从 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) )
这里同样的错误,我的情况是我更改了自定义模块中的导入声明: 之前:
`import { BaseChartModule, SortModule } from '@pure-components';`
更改为:
import { BaseChartModule } from '../base-chart/base-chart.module';
我会调查为什么会发生这种情况,但对我来说效果很好,我希望有帮助
@NgModule({
imports: [RouterModule.forRoot(routes, {
// initialNavigation: 'enabled',
scrollPositionRestoration: 'top'
})],
exports: [RouterModule]
})
export class AppRoutingModule { }
如果你使用 Angular Universal 并使用“ngserve”提供 Angular 存储库,然后添加到评论initialNavigation,它对我有用
好的,我回答这个问题只是为了以防万一有人在这个线程上并使用 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 发布并将其安装在目标应用程序中。它应该有效。
详情请阅读:
当我将 Angular 应用程序中的方法从模块更改为独立组件时,我就遇到过这种情况。之后,我在两个组件之间存在循环依赖关系,由于某种原因,它返回了这个隐式错误(也许它不是显式的,因为它是在执行单元测试期间发生的)。如果您引入桶装出口,也可能会发生同样的情况。
模块中很可能存在问题,但被隐藏为内部异常。如果运行 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
],