Monorepo via multiple folders is not detected

[brodenbrett]

I have a mono repo set up for my Ionic/Angular project using multiple folders. No framework is being used here, just angular.json.

My angular.json file, where my projects are located under /apps:

{
	"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
	"version": 1,
	"newProjectRoot": "apps",
	"projects": {
		"app-one": {
			"projectType": "application",
			"root": "",
			"sourceRoot": "src",
			// extra config...
		},

		"app-two": {
			// extra config...
		},
	},
}

I see WebNative says it has support for plain-jane mono repo structure such as this, but it does not detect it.

How do I tell WebNative that I have multiple project folders and where they are located - should it parse angular.json to determine this?

It is not strictly needed for my project, but it would be nice to have.

Thanks!

[damiant]

I was looking at this and it seems you need multiple Angular project support (its not really a mono-repo). Are you able to supply a sample repo that has the configuration you are after and I'll see whether I can add support - probably through build configuration options rather than treating as a separate project.

[brodenbrett]

Ah I understand what you mean! I'd consider this a nice to have - I imagine a shared app template is a pretty unique case.

I've got my set-up working well enough for my purposes. I've moved on to a new task now and don't have the space to create a new repo for this, but I can share a sample angular.json file. My repo uses the latest versions of Angular 19.8, Ionic 8.6, and Capacitor 7.0.

{
	"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
	"version": 1,
	"newProjectRoot": "apps",
	"projects": {

		"myproject": {
			"projectType": "application",
			"schematics": {
				"@ionic/angular-toolkit:page": {
					"styleext": "scss",
					"standalone": true
				}
			},
			"root": "",
			"sourceRoot": "src",
			"prefix": "app",
			"architect": {
				"build": {
					"builder": "@angular-devkit/build-angular:application",
					"options": {
						"allowedCommonJsDependencies": [
							"localforage",
							"crypto-js",
							"fast-deep-equal",
							"onesignal-cordova-plugin"
						],
						"stylePreprocessorOptions": {
							"sass": {
								"silenceDeprecations": [ "import" ]
							}
						},
						"outputPath": "apps/myproject/www",
						"index": "src/index.html",
						"polyfills": [
							"src/polyfills.ts"
						],
						"tsConfig": "tsconfig.app.json",
						"inlineStyleLanguage": "scss",
						"assets": [
							{
								"glob": "**/*",
								"input": "src/assets",
								"output": "assets"
							}
						],
						"styles": [
							"src/global.scss",
							"apps/myproject/src/theme/variables.scss"
						],
						"scripts": [ ],
						"browser": "src/main.ts"
					},
					"configurations": {
						"production": {
							"budgets": [
								{
									"type": "initial",
									"maximumWarning": "2mb",
									"maximumError": "5mb"
								},
								{
									"type": "anyComponentStyle",
									"maximumWarning": "8kb",
									"maximumError": "10kb"
								}
							],
							"fileReplacements": [
								{
									"replace": "src/environments/environment.ts",
									"with": "apps/myproject/src/environments/environment.prod.ts"
								}
							],
							"outputHashing": "all"
						},
						"development": {
							//  "buildOptimizer": false,
							"optimization": false,
							//  "vendorChunk": true,
							"extractLicenses": false,
							"sourceMap": true,
							"namedChunks": true,
							"fileReplacements": [
								{
									"replace": "src/environments/environment.ts",
									"with": "apps/myproject/src/environments/environment.ts"
								}
							]
						}
					},
					"defaultConfiguration": "production"
				},
				"serve": {
					"builder": "@angular-devkit/build-angular:dev-server",
					"configurations": {
						"production": {
							"buildTarget": "myproject:build:production"
						},
						"development": {
							"buildTarget": "myproject:build:development"
						}
					},
					"defaultConfiguration": "development"
				},
				"extract-i18n": {
					"builder": "@angular-devkit/build-angular:extract-i18n",
					"options": {
						"buildTarget": "myproject:build"
					}
				},
				"lint": {
					"builder": "@angular-eslint/builder:lint",
					"options": {
						"lintFilePatterns": [
							"src/**/*.ts",
							"src/**/*.html"
						]
					}
				}
			}
		},

		"myproject-2": {
			// similar to "myproject" with updated pathing
		}

	},
	"cli": {
		"schematicCollections": [
			"@ionic/angular-toolkit"
		],
		"analytics": false
	},
	"schematics": {
		"@ionic/angular-toolkit:component": {
			"styleext": "scss"
		},
		"@ionic/angular-toolkit:page": {
			"styleext": "scss"
		},
		"@angular-eslint/schematics:application": {
			"setParserOptionsProject": true
		},
		"@angular-eslint/schematics:library": {
			"setParserOptionsProject": true
		}
	}
}

On the off chance someone runs into similar issue, my solution was to create some shell scripts to do the heavy lifting when it comes to build & sync, debugging, and versioning. They are saved to a folder on my workspace and run via VS Code's tasks feature. More then happy to share these in the future if someone wants to get in contact.