StoryBook Angular - 错误！ => 无法获取 Angular cli webpack 配置

Posted 2023-02-19

【中文标题】StoryBook Angular - 错误！ => 无法获取 Angular cli webpack 配置

【英文标题】：StoryBook Angular - ERR! => Could not get angular cli webpack config

【发布时间】：2021-11-01 15:21:22

【问题描述】：

在执行 npm run storybook 时，该过程失败并出现以下错误：

ERR! => Could not get angular cli webpack config

【问题讨论】：

同样的事情......还没弄清楚。我最近对 ​​Storybook 感到特别沮丧。喜欢这个工具，但将它安装在 Angular 项目中......祝你好运！

【参考方案1】：

此错误通常发生在为 angular.json 文件中的资产添加其他源时。

修复：

从 angular.json 下的资产中移除额外的来源

打开 package.json 并编辑故事书脚本如下：

"storybook": "npm run docs:json && start-storybook -p 6006 -s projects/"

【讨论】：

来源？你指的是什么来源？你的意思是CSS等文件吗？请举例？谢谢你。如果是这样，我为什么要删除运行 Storybook 所需的文件？

我的组件库位于 projects/ 目录下。为了在故事书中使用组件库的资产，我尝试将这些资产的路径添加到故事书的 angular.json 文件中（假设故事书的工作方式类似于普通的 Angular 项目）。但是我错了！ Storybook 要求您在启动 Storybook 时在 CLI 中传递静态目录的路径。这可以从我上面分享的语法中看出（你只需要看到 -s 标志，以及之后的路径）。

【参考方案2】：

我有同样的问题。我的解决方法是在 angular.json 文件中专门命名“root”和“sourceRoot”的路径。

  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": 
    "storybook": 
      "projectType": "application",
      "sourceRoot": "projects/my-lib/src/lib",
      "root": "projects/my-lib",
      "architect": 
         ...
      ,
    ...
    ,
  ...
  ,

【讨论】：

我的 angular.json 文件中没有故事书项目，但我添加了您的建议，减去“建筑师”属性，在解决了另一个问题后，我能够获得故事书建设和运行。谢谢！