Angular 9：NgModule.imports 中位置 X 的值不是参考答案

【问题标题】：Angular 9: Value at position X in the NgModule.imports is not a referenceAngular 9：NgModule.imports 中位置 X 的值不是参考
【发布时间】：2020-06-28 18:12:06
【问题描述】：

我将 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关于深层链接，但没有有效的解决方案。

【问题讨论】：

我也遇到了同样的问题，请问您知道出了什么问题吗？

标签： angular deeplink angular-cli-v9

【解决方案1】：

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

【讨论】：

对我也有用，但要小心，您必须关闭每个打开的 VSCode 实例才能使其工作。
这行得通。谢谢

【解决方案2】：

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

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,
      ],
    };
  }
}

【讨论】：

谢谢！我的一个模块做的不对。文档：angular.io/guide/migration-module-with-providers
重启vs代码就可以正常工作了

【解决方案3】：

在我的情况下，问题与导入的库有关，它与 Angular v9 不兼容（除其他外，它没有使用指向 Angular Material 和 moment.js 的深层链接）。

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

【讨论】：

【解决方案4】：

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

当我使用 ng new test-ng9 创建新存储库，然后添加角度材料 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",

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

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

然后我从我的 app.module.ts 文件中删除了该组件声明然后就成功了

【讨论】：