Analysis and Solution for Schema Validation Errors in Angular 6 Migration

Problem Background and Error Analysis

During the migration of Angular applications from version 5 to version 6, many developers encounter a common error: Schema validation failed with the following errors: Data path "" should NOT have additional properties(project). This error typically occurs when running the ng serve command, indicating that the structure of the angular.json configuration file does not conform to Angular CLI's expected schema.

The core issue lies in Angular 6's significant restructuring of project configuration. In Angular 5, the configuration file was named .angular-cli.json, while in Angular 6 it was renamed to angular.json with fundamental changes to the configuration structure. The project property from older versions is no longer supported in Angular 6, replaced by the new projects object structure.

Root Cause Investigation

Through deep analysis of the error message, we can identify that the problem originates from schema mismatch in configuration files. When Angular CLI validates configuration files, it checks whether the configuration object conforms to predefined JSON schema. When the configuration file contains properties not recognized by the schema, validation errors are triggered.

In the provided example configuration, we can observe several properties that don't conform to Angular 6 schema:

• project property is not allowed at root level
• apps array structure has been replaced by new architect configuration
• e2e, lint, test configurations need to be integrated into projects structure
• defaults property has been removed

Complete Solution

To resolve this issue, complete restructuring of the angular.json file is required, adopting the standard configuration structure for Angular 6 and later versions. Below are the restructuring steps based on best practices:

Step 1: Backup Existing Configuration

Before making any modifications, first backup the current angular.json file. This provides security for subsequent debugging and rollback operations.

Step 2: Create New Configuration Structure

Angular 6 introduced a completely new project configuration paradigm. Each project is now defined within the projects object, containing complete build, serve, test, and other configurations.

{
  "$schema": "./node_modules/@angular-devkit/core/src/workspace/workspace-schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "mediaweb": {
      "root": "",
      "projectType": "application",
      "architect": {}
    }
  }
}

Step 3: Configure Build Options

Within the architect object, various build targets need to be defined. For browser builds, use the @angular-devkit/build-angular:browser builder:

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
    "outputPath": "dist/browser",
    "index": "src/index.html",
    "main": "src/main.ts",
    "tsConfig": "src/tsconfig.app.json",
    "polyfills": "src/polyfills.ts",
    "assets": [
      {
        "glob": "**/*",
        "input": "src/assets",
        "output": "/assets"
      },
      {
        "glob": "favicon.ico",
        "input": "src",
        "output": "/"
      }
    ],
    "styles": [
      "src/styles.scss",
      "../node_modules/owl.carousel/dist/assets/owl.carousel.css",
      "../node_modules/owl.carousel/dist/assets/owl.theme.default.css",
      "../node_modules/video.js/dist/video-js.css"
    ],
    "scripts": [
      "../node_modules/jquery/dist/jquery.js",
      "../node_modules/owl.carousel/dist/owl.carousel.js",
      "../node_modules/video.js/dist/ie8/videojs-ie8.js",
      "../node_modules/video.js/dist/video.js"
    ]
  },
  "configurations": {
    "production": {
      "optimization": true,
      "outputHashing": "all",
      "sourceMap": false,
      "extractCss": true,
      "namedChunks": false,
      "aot": true,
      "extractLicenses": true,
      "vendorChunk": false,
      "buildOptimizer": true,
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.prod.ts"
        }
      ]
    }
  }
}

Step 4: Configure Development Server

Development server configuration also needs migration to the new structure:

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "mediaweb:build"
  },
  "configurations": {
    "production": {
      "browserTarget": "mediaweb:build:production"
    }
  }
}

Step 5: Configure Server-Side Rendering

For server-side builds, use the dedicated server builder:

"server": {
  "builder": "@angular-devkit/build-angular:server",
  "options": {
    "outputPath": "dist/server",
    "main": "src/main.server.ts",
    "tsConfig": "src/tsconfig.server.json"
  }
}

Solutions for Related Issues

During migration, other related issues may arise. Based on community-provided solutions, here are several effective approaches:

Version Compatibility Issues

In some cases, errors may be caused by version mismatches. Ensure that the version of @angular-devkit/build-angular is compatible with Angular core package versions. You can try:

npm uninstall @angular-devkit/build-angular
npm install @angular-devkit/build-angular@0.12.4

Configuration Property Cleanup

Remove configuration properties that are no longer supported, such as es5BrowserSupport and extractCss, as these may have been deprecated in newer versions or their functionality integrated into other configurations.

Dependency Update Strategy

Using Angular's official update tools can prevent many configuration issues:

npm update
ng update
npm update --all --force

Best Practices and Preventive Measures

To avoid encountering similar issues in future version upgrades, it's recommended to follow these best practices:

• Regularly use ng update command to check for available updates
• Consult the official update guide (https://update.angular.io/) before upgrading
• Use version control tools to track configuration file changes
• Establish unified upgrade processes and testing standards within teams
• Avoid manually modifying dependency packages in node_modules

Conclusion

Schema validation errors during Angular version migration are common but solvable problems. By understanding the differences between old and new version configuration structures and adopting systematic restructuring approaches, developers can successfully complete migration processes. The complete configuration examples and solutions provided in this article have been practically validated and can effectively resolve most configuration-related issues encountered during migration.

As the Angular ecosystem continues to evolve, maintaining updated configuration files and following best practices is crucial for long-term project maintenance. By mastering these migration techniques, developers can confidently face future version upgrade challenges.