Angular 9: NgModule.imports 中 X 位置的值不是引用

Question

我将 Angular 应用程序从 v8 升级到 v9。该项目使用 Angular 8 和 moment.js.

导入自定义 UI 库

当我构建它时：

生成警告：

WARNING in Entry point '@myLib/catalogue' contains deep imports into
 '/Users/xyz/Projects/forms-frontend/node_modules/moment/locale/de'.
This is probably not a problem, but may cause the compilation of entry points to be out of order.

在库的 @myLib/catalogue.js 文件中（在 node_modules 文件夹内），moment.js DE 语言环境导入如下：

import 'moment/locale/de';

也会触发编译错误：

ERROR in Failed to compile entry-point @myLib/catalogue (es2015 as esm2015) due to compilation errors:
node_modules/@myLib/catalogue/fesm2015/catalogue.js:213:26 - error NG1010: Value at position 2 in the NgModule.imports of FormInputModule is not a reference: [object Object]

213                 imports: [
                             ~
214                     CommonModule,
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
... 
219                     TranslateModule
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
220                 ],
    ~~~~~~~~~~~~~~~~~

警告文本似乎准确地解释了编译错误，其中位置（在本例中为 2）超出了导入数组的范围。

我看过关于深层链接的不同文章/github issues，但没有有效的解决方案。

Answer 1

您需要更改模块的自定义构建，因此您需要对以下模块进行模拟更改，在我的情况下，我需要更改：

export class ThemeModule {
  static forRoot(): ModuleWithProviders {
    return <ModuleWithProviders>{
      ngModule: ThemeModule,
      providers: [
        ...NbThemeModule.forRoot(
          {
            name: 'default',
          },
          [DEFAULT_THEME, COSMIC_THEME, CORPORATE_THEME, DARK_THEME],
        ).providers,
      ],
    };
  }
}

至：

export class ThemeModule {
  static forRoot(): ModuleWithProviders<ThemeModule> {
    return {
      ngModule: ThemeModule,
      providers: [
        ...NbThemeModule.forRoot(
          {
            name: 'default',
          },
          [DEFAULT_THEME, COSMIC_THEME, CORPORATE_THEME, DARK_THEME],
        ).providers,
      ],
    };
  }
}

Answer 2

在我的例子中，问题与一个导入的库有关，它与 Angular v9 不兼容（除其他外，它没有使用 Angular Material 和 moment.js 的深层链接） .

我很幸运，因为图书馆是实习生，我可以解决这些问题并重新发布。之后它在我的项目方面没有任何问题或变化地构建。

Answer 3

就我而言，我认为导入的某些 angular 库之间存在一些不兼容性。我想我之前手动将 @angular/material 提升到 9.2.3 而没有提升其他 angular 库。

当我使用 ng new test-ng9 创建新存储库然后添加 angular material ng add @angular/material 时，没有编译问题。

所以我采用了 angular cli 包含在临时存储库中的依赖项，并替换了我现有存储库中的依赖项。然后就正常了。

之前:

    "@angular/animations": "~9.1.6",
    "@angular/cdk": "9.1.1",
    "@angular/common": "~9.1.1",
    "@angular/compiler": "~9.1.1",  
    "@angular/core": "~9.1.1",
    "@angular/forms": "~9.1.1",
    "@angular/material": "9.2.3",
    "@angular/platform-browser": "~9.1.1",
    "@angular/platform-browser-dynamic": "~9.1.1",
    "@angular/router": "~9.1.1",

之后:

    "@angular/animations": "~9.1.6",
    "@angular/cdk": "9.1.1",    
    "@angular/common": "~9.1.6",
    "@angular/compiler": "~9.1.6",
    "@angular/core": "~9.1.6",
    "@angular/forms": "~9.1.6",
    "@angular/material": "^9.2.4",
    "@angular/platform-browser": "~9.1.6",
    "@angular/platform-browser-dynamic": "~9.1.6",
    "@angular/router": "~9.1.6",

Answer 4

#2 在我不小心在项目文件夹而不是 dist 文件夹中使用 npm link 后发生在我身上。

Answer 5

我有这个错误，因为我删除了一个我的组件 ts 文件以便复制粘贴代码我的导师

然后我从 app.module.ts 文件中删除了那个组件声明然后成功了

Answer 6

您可能使用了 npm i 并且编辑器可能无法正确生成构建。尝试重新启动您的编辑器。重新启动对我有用。我正在使用 VSCode

Angular 9: NgModule.imports 中 X 位置的值不是引用

Angular 9: Value at position X in the NgModule.imports is not a reference

deeplink

angular

angular-cli-v9