尝试安装角度数据表时无法读取未定义的属性（读取“选项”）

Question

我正在将我的 Angular 应用程序从 v14 更新到 v17。我在执行此操作时采取的一个步骤是升级

angular-datatables

。运行

ng add angular-datatables

后，我收到与未定义选项相关的错误。这是完整的终端日志：

PS C:\Users\IM010907\Documents\git\Dashboard\ID_Client> npm run add-datatables

> [email protected] add-datatables
> ng add angular-datatables

? Would you like to share pseudonymous usage data about this project with the Angular Team
at Google under Google's Privacy Policy at https://policies.google.com/privacy. For more  
details and how to change this setting, see https://angular.io/analytics. No
Global setting: not set
Local setting: disabled
Effective status: disabled
ℹ Using package manager: npm
✔ Found compatible package version: [email protected].
✔ Package information loaded.

The package [email protected] will be installed and executed.
Would you like to proceed? Yes
✔ Packages successfully installed.
? Which styling library would you like to use for DataTables? Bootstrap 5
    Your project needs Bootstrap CSS installed and configured for changes to take affect.
    ℹ️  Skipped adding "jquery" into package.json
    ✅️ Added "datatables.net" into "dependencies"
    ✅️ Added "@types/jquery" into "devDependencies"
    ✅️ Added "datatables.net-bs5" into "dependencies"
    🔍 Installing packages...
Cannot read properties of undefined (reading 'options')

我已经尝试过...

• 使用默认样式和 Bootstrap 5 安装。
• 使用手动安装，如其文档中所示
• 在运行命令之前删除我的

  node_modules

  /

  package.json

  。
• 从

  angular.json

中删除所有旧脚本/样式

提前感谢您提供任何可能的提示！

Answer 1

问题/原因

问题是原理图无法将资源添加到 angular.json，因为它尝试访问的项目没有构建选项。

查看他们的源代码我发现了以下函数（感谢Thomas Renger提供的链接）：

export function addAssetToAngularJson(host: Tree, assetType: string, assetPath: string): boolean {
  /* tslint:disable-next-line: no-non-null-assertion */
  const sourceText = host.read('angular.json')!.toString('utf-8');
  const json = JSON.parse(sourceText);

  if (!json) return false;

  const projectName = Object.keys(json['projects'])[0];
  const projectObject = json.projects[projectName];
  const targets = projectObject.targets || projectObject.architect;

  const targetLocation: string[] = targets.build.options[assetType];

  // update UI that `assetPath` wasn't re-added to angular.json
  if (targetLocation.indexOf(assetPath) != -1) return false;

  targetLocation.push(assetPath);

  host.overwrite('angular.json', JSON.stringify(json, null, 2));

  return true;

}

我意识到他们只是假设我想要第一个项目的设置。我的 angular.json 会自动按字母顺序排序（可能来自 NX 或其他一些工具）。因此，它尝试访问仅需要 lint/测试配置设置的项目。我的项目看起来有点类似于以下内容：

"projects": {
   "project_a": {
       "architect": {
           "lint": {
               "options": {
                  // Options here
               }
           },
           "test": {
               "options": {
                  // Options here
               }
           }
       }
   },
   "project_b": {
       "architect": {
           "lint": {
               "options": {
                  // Options here
               }
           },
           "test": {
               "options": {
                  // Options here
               }
           },
           "build": { // THIS IS THE SECTION THAT MUST BE IN THE PROJECT AT INDEX 0
               "options": {
                  // Options here
               }
           }
       }
   },
   "project_c": {
       "architect": {
           "lint": {
               "options": {
                  // Options here
               }
           },
           "test": {
               "options": {
                  // Options here
               }
           }
       }
   }
}

解决方案/TLDR

要解决此问题，您所需要做的就是将具有构建设置的项目移动到顶部，这将解决问题，因为现在将在索引 0 处读取构建设置。我能够运行

ng add angular-datatables

，无需此后的问题。

"projects": {
   "project_b": {
       "architect": {
           "lint": {
               "options": {
                  // Options here
               }
           },
           "test": {
               "options": {
                  // Options here
               }
           },
           "build": { // THIS IS THE SECTION THAT MUST BE IN THE PROJECT AT INDEX 0
               "options": {
                  // Options here
               }
           }
       }
   },
   "project_a": {
       "architect": {
           "lint": {
               "options": {
                  // Options here
               }
           },
           "test": {
               "options": {
                  // Options here
               }
           }
       }
   },
   "project_c": {
       "architect": {
           "lint": {
               "options": {
                  // Options here
               }
           },
           "test": {
               "options": {
                  // Options here
               }
           }
       }
   }
}