【问题标题】:Angular Library with Ivy enabled fails to load启用 Ivy 的 Angular 库无法加载
【发布时间】:2020-04-21 04:48:56
【问题描述】:

我正在尝试创建一个角度库项目,但我在控制台中收到此错误

Uncaught TypeError: Cannot read property 'id' of undefined
    at registerNgModuleType (core.js:34470)
    at core.js:34488
    at Array.forEach (<anonymous>)
    at registerNgModuleType (core.js:34484)
    at new NgModuleFactory$1 (core.js:34651)
    at compileNgModuleFactory__POST_R3__ (core.js:40286)
    at PlatformRef.bootstrapModule (core.js:40609)
    at Module../src/main.ts (main.ts:11)
    at __webpack_require__ (bootstrap:79)
    at Object.0 (main.ts:12)

我用ng new --enable-ivy 创建了一个新的角度项目,然后用ng g library my-lib 添加了一个库。我的库有一个带有模块的辅助端点(如下),因此导入将是 import { MyLibModule } from 'my-lib/secondary';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [
    MyLibDirective
  ],
  exports: [
    MyLibDirective
  ]
})
export class MyLibModule {
  public static forRoot(): ModuleWithProviders {
    return {
      ngModule: MyLibModule,
      providers: []
    };
  }
}

我使用 ng build my-lib 构建它,所有构建都很好,我使用链接将库包含在演示应用程序中,在我运行的库的 dist 文件夹中 yarn link 并在我运行的根演示应用程序文件夹中yarn link my-lib,然后将模块包含在 AppModule 的导入中

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MyLibModule } from 'my-lib/secondary';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MyLibModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

但是,当我运行 yarn startng serve 时,一切正常,但我在控制台中收到上述错误,在浏览器中调试它似乎我的库模块中的 ngModuleDef 属性不存在,确实有人知道为什么会这样吗?

注意:如果我关闭 Ivy,这不是问题,但随着 ng9 即将推出,这不是一个真正可行的解决方案,我想知道我在库中做错了什么(如果有的话)

来自ng version的输出

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 8.3.21
Node: 12.12.0
OS: darwin x64
Angular: 8.2.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.803.21
@angular-devkit/build-angular      0.803.21
@angular-devkit/build-ng-packagr   0.803.21
@angular-devkit/build-optimizer    0.803.21
@angular-devkit/build-webpack      0.803.21
@angular-devkit/core               8.3.21
@angular-devkit/schematics         8.3.21
@angular/cli                       8.3.21
@ngtools/webpack                   8.3.21
@schematics/angular                8.3.21
@schematics/update                 0.803.21
ng-packagr                         5.7.1
rxjs                               6.5.4
typescript                         3.5.3
webpack                            4.39.2

【问题讨论】:

  • 什么版本的 Angular?
  • @NeilStevens 我不知道错误来自哪里,但 Angular 建议不要生成/发布常春藤库 read here。保持向后兼容性
  • @Reactgular 更新问题
  • @PierreDuc 我没有生成 ivy 库我正在为库使用 View Engine 编译器,ngcc 在我构建/提供演示应用程序时在库中使用
  • @NeilStevens 好吧,我现在明白了。嗯,感觉在导入这样的 src 库时出了点问题。如果在导入时使用相对路径会发生什么?喜欢../../projects/my-lib/lib/src/my-lib.module?或者如果你用ModuleWithProviders&lt;MyLibModule&gt;改变forRoot()的返回类型会发生什么

标签: angular angular-library angular-ivy


【解决方案1】:
  1. npm 卸载 -g @angular/cli
  2. npm install -g @angular/cli@8.3.19 --检查你的项目CLI版本 3.ng_Modules 从本地文件夹中删除
  3. npm 安装

【讨论】:

    猜你喜欢
    • 2019-04-03
    • 2021-01-29
    • 2013-09-06
    • 2015-03-01
    • 2013-08-06
    • 2020-10-16
    • 1970-01-01
    • 1970-01-01
    • 2021-04-03
    相关资源
    最近更新 更多