Storybook configuration in angular/cli monorepo

[IshithaJain]

Hi,
I am using angular monorepo project. I want to configure storybook in my project. I have installed storybook and when I am running storybook I am getting issue The projects/squads/src/favicon.ico asset path must start with the project source root.

Angular cli version is ^13.1, Storybook version is 6.4.12
Here is the code in angular.json

{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"cli": {
"analytics": "d232fdd4-4d4a-4b3a-a359-d5d6ec27f9b9"
},
"version": 1,
"newProjectRoot": "projects",
"projects": {
"squads": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
},
"@schematics/angular:application": {
"strict": true
}
},
"root": "projects/squads",
"sourceRoot": "projects/squads/src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/squads",
"index": "projects/squads/src/index.html",
"main": "projects/squads/src/main.ts",
"polyfills": "projects/squads/src/polyfills.ts",
"tsConfig": "projects/squads/tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": [
"projects/squads/src/favicon.ico",
"projects/squads/src/assets"
],
"styles": ["projects/squads/src/styles.scss"],
"scripts": []
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "500kb",
"maximumError": "1mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "4kb"
}
],
"fileReplacements": [
{
"replace": "projects/squads/src/environments/environment.ts",
"with": "projects/squads/src/environments/environment.prod.ts"
}
],
"outputHashing": "all"
},
"development": {
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"browserTarget": "squads:build:production"
},
"development": {
"browserTarget": "squads:build:development"
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "squads:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "projects/squads/src/test.ts",
"polyfills": "projects/squads/src/polyfills.ts",
"tsConfig": "projects/squads/tsconfig.spec.json",
"karmaConfig": "projects/squads/karma.conf.js",
"inlineStyleLanguage": "scss",
"assets": [
"projects/squads/src/favicon.ico",
"projects/squads/src/assets"
],
"styles": ["projects/squads/src/styles.scss"],
"scripts": []
}
}
}
},
"blog": {
"projectType": "application",
"schematics": {
"@schematics/angular:application": {
"strict": true
}
},
"root": "projects/blog",
"sourceRoot": "projects/blog/src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/blog",
"index": "projects/blog/src/index.html",
"main": "projects/blog/src/main.ts",
"polyfills": "projects/blog/src/polyfills.ts",
"tsConfig": "projects/blog/tsconfig.app.json",
"assets": [
"projects/blog/src/favicon.ico",
"projects/blog/src/assets"
],
"styles": [
"projects/blog/src/styles.css"
],
"scripts": []
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "500kb",
"maximumError": "1mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "4kb"
}
],
"fileReplacements": [
{
"replace": "projects/blog/src/environments/environment.ts",
"with": "projects/blog/src/environments/environment.prod.ts"
}
],
"outputHashing": "all"
},
"development": {
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"browserTarget": "blog:build:production"
},
"development": {
"browserTarget": "blog:build:development"
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "blog:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "projects/blog/src/test.ts",
"polyfills": "projects/blog/src/polyfills.ts",
"tsConfig": "projects/blog/tsconfig.spec.json",
"karmaConfig": "projects/blog/karma.conf.js",
"assets": [
"projects/blog/src/favicon.ico",
"projects/blog/src/assets"
],
"styles": [
"projects/blog/src/styles.css"
],
"scripts": []
}
}
}
}
},
"defaultProject": "squads"
}

[valentinpalkovic]

@IshithaJain After #20559 is merged, it should be pretty easy to setup Angular in a multi-project setup.