Following on from this post
I am trying to “undo” swapping to the new Angular es-build
, as perhaps Ionic does not like it.
So, my angular.json
now looks very similar to a new default Ionic/Angular project I created.
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"app": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath":"www",
"main": "src/main.ts",
"allowedCommonJsDependencies": [
"semaphore-async-await",
"chart.js",
"chartjs-plugin-datalabels"
],
"preserveSymlinks": true,
"index": "src/index.html",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
{
"glob": "**/*",
"input": "src/assets",
"output": "assets"
},
{
"glob": "**/*.min.css",
"output": "assets/theme",
"input": "./node_modules/@bryntum/scheduler/"
},
{
"glob": "**/*",
"output": "assets/theme/fonts",
"input": "./node_modules/@bryntum/scheduler/fonts"
},
{
"glob": "**/*.svg",
"input": "node_modules/ionicons/dist/ionicons/svg",
"output": "./svg"
}
],
"styles": ["src/global.scss", "src/theme/variables.scss"],
"scripts": [],
"aot": false,
"extractLicenses": false,
"sourceMap": true,
"optimization": false,
"namedChunks": true
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "30mb",
"maximumError": "35mb"
}
]
},
"production-win": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.win.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "30mb",
"maximumError": "35mb"
}
]
},
"production-win-dev": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.win.prod.ts"
}
],
"outputHashing": "all",
"namedChunks": false,
"extractLicenses": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "30mb",
"maximumError": "35mb"
}
]
},
"development": {
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
},
"ci": {
"progress": false
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"buildTarget": "app:build:production"
},
"production-win": {
"buildTarget": "app:build:production"
},
"production-win-dev": {
"buildTarget": "app:build:production"
},
"development": {
"buildTarget": "app:build:development"
},
"ci": {}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"buildTarget": "app:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
"styles": [],
"scripts": [],
"assets": [
{
"glob": "favicon.ico",
"input": "src/",
"output": "/"
},
{
"glob": "**/*",
"input": "src/assets",
"output": "/assets"
}
]
},
"configurations": {
"ci": {
"progress": false,
"watch": false
}
}
},
"lint": {
"builder": "@angular-eslint/builder:lint",
"options": {
"lintFilePatterns": [
"src/**/*.ts",
"src/**/*.html"
]
}
},
"ionic-cordova-build": {
"builder": "@ionic/cordova-builders:cordova-build",
"options": {
"browserTarget": "app:build"
},
"configurations": {
"production": {
"browserTarget": "app:build:production"
}
}
},
"ionic-cordova-serve": {
"builder": "@ionic/cordova-builders:cordova-serve",
"options": {
"cordovaBuildTarget": "app:ionic-cordova-build",
"devServerTarget": "app:serve"
},
"configurations": {
"production": {
"cordovaBuildTarget": "app:ionic-cordova-build:production",
"devServerTarget": "app:serve:production"
}
}
}
}
},
"app-e2e": {
"root": "e2e/",
"projectType": "application",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "app:serve"
},
"configurations": {
"ci": {
"devServerTarget": "app:serve:ci"
}
}
}
}
}
},
"cli": {
"schematicCollections": [
"@ionic/angular-toolkit"
],
"analytics": "766e20ce-9036-4dcc-a0cc-d82d67688f03"
},
"schematics": {
"@ionic/angular-toolkit:component": {
"styleext": "scss"
},
"@ionic/angular-toolkit:page": {
"styleext": "scss"
}
}
}
But now when I ng serve
I get
SchemaValidationException [Error]: Schema validation failed with the following errors:
[ng] Data path "" must have required property 'buildTarget'.
[ng] Data path "" must have required property 'browserTarget'.
[ng] Data path "" must match a schema in anyOf.
[ng] at C:devmy-appnode_modules@angular-devkitarchitectsrcarchitect.js:40:27 {
[ng] errors: [
[ng] {
[ng] instancePath: '',
[ng] schemaPath: '#/anyOf/0/required',
[ng] keyword: 'required',
[ng] params: { missingProperty: 'buildTarget' },
[ng] message: "must have required property 'buildTarget'"
[ng] },
[ng] {
[ng] instancePath: '',
[ng] schemaPath: '#/anyOf/1/required',
[ng] keyword: 'required',
[ng] params: { missingProperty: 'browserTarget' },
[ng] message: "must have required property 'browserTarget'"
[ng] },
[ng] message: "must have required property 'browserTarget'"
[ng] },
[ng] {
[ng] {
[ng] instancePath: '',
[ng] schemaPath: '#/anyOf',
[ng] keyword: 'anyOf',
[ng] params: {},
[ng] message: 'must match a schema in anyOf'
[ng] }
[ng] ]
[ng] }
[ng] Node.js v20.15.1
I am guessing it is somthing in the architect
tag, but looking in architect.js
I cannot for the life of me work out what the above is talking about. I am not sure how to “debug” into it.
Would anyone have any ideas what is wrong with my angular.json?
The best way is to revert the commit or discard changes, if you are using git.
Create a new ionic project with the same version as your project.
Then compare the architect.js
with your file.
See where the props buildTarget
and browserTarget
are present. Fix this hopefully it solves this issue!