Data path "" should have required property 'name'.

[ionic-team]

Data path "" should have required property 'name'.

[imhoffd]

@DoctorRu Does this happen in a new app? If not, compare the differences in the angular.json files.

[davl3232]

I have the same issue when running ionic generate:

ionic g m
? Name/path of module: components/tree
> ng generate module components/tree
Schematic input does not validate against the Schema: {"routing":false,"routingScope":"Child","spec":true,"flat":false,"commonModule":true}
Errors:

  Data path "" should have required property 'name'.
[ERROR] Could not generate module.

It fails for modules and components, but works for pages.

[imhoffd]

@davl3232 Also on 1.2.2? I can't seem to repro:

❯ ionic g m
? Name/path of module: components/tree
> ng generate module components/tree
CREATE src/app/components/tree/tree.module.ts (188 bytes)
[OK] Generated module!

[imhoffd]

@DoctorRu @davl3232 Do you both have defaultCollection set in angular.json for the schematics?

  "cli": {
    "defaultCollection": "@ionic/angular-toolkit"
  },

[davl3232]

My project is a monorepo with three angular projects, one of which is an ionic 4 app we started back when the first beta released, and that's currently on 4.0.0-rc.2. The monorepo was created using nx.

[imhoffd]

ng generate uses a schematics collection to generate app features. By default (outside Ionic), the collection used is @schematics/angular. The Ionic starters have the following configuration in angular.json: https://github.com/ionic-team/starters/blob/6c824e4ef8834324648502a5cb48c89a57657a52/angular/base/angular.json#L182-L184

This setting tells the Angular CLI to use a different schematics collection. If it is not in your angular.json, then you're not using the schematics in @ionic/angular-toolkit.

[davl3232]

This was my angular.json

{
  "$schema":
    "./node_modules/@angular-devkit/core/src/workspace/workspace-schema.json",
  "version": 1,
  "defaultProject": "app",
  "projects": {
    "app": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "progress": false,
            "outputPath": "www",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              {
                "glob": "**/*",
                "input": "src/assets",
                "output": "assets"
              },
              {
                "glob": "**/*.svg",
                "input": "node_modules/ionicons/dist/ionicons/svg",
                "output": "./svg"
              },
              {
                "glob": "**/*.svg",
                "input": "node_modules/@ionic/angular/dist/ionic/svg",
                "output": "./svg"
              },
              {
                "glob": "**/*.svg",
                "input": "src/assets/custom-ion-icons",
                "output": "./svg"
              },
            ],
            "styles": [
              {
                "input": "src/theme/variables.scss"
              },
              {
                "input": "src/global.scss"
              }
            ],
            "scripts": ["node_modules/chart.js/dist/Chart.js"]
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "app:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "app:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "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": ["styles.css"],
            "scripts": [],
            "assets": [
              {
                "glob": "favicon.ico",
                "input": "src/",
                "output": "/"
              },
              {
                "glob": "**/*",
                "input": "src/assets",
                "output": "/assets"
              }
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": ["src/tsconfig.app.json", "src/tsconfig.spec.json"],
            "exclude": ["**/node_modules/**"]
          }
        },
        "ionic-cordova-build": {
          "builder": "@ionic/ng-toolkit:cordova-build",
          "options": {
            "browserTarget": "app:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "app:build:production"
            }
          }
        },
        "ionic-cordova-serve": {
          "builder": "@ionic/ng-toolkit: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"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": ["**/node_modules/**"]
          }
        }
      }
    }
  },
  "cli": {
    "defaultCollection": "@ionic/schematics-angular"
  },
  "schematics": {
    "@ionic/schematics-angular:component": {
      "styleext": "scss"
    },
    "@ionic/schematics-angular:page": {
      "styleext": "scss"
    }
  }
}

So I changed the last part to this and ran npm i @ionic/angular-toolkit:

{
  ...
  "cli": {
    "defaultCollection": "@ionic/angular-toolkit"
  }
}

It still fails:

ionic g c components/tree
> ng generate component components/tree
Schematic input does not validate against the Schema: {"inlineStyle":false,"inlineTemplate":false,"changeDetection":"Default","styleext":"css","spec":true,"flat":false,"skipImport":false,"export":false,"entryComponent":false,"lintFix":false}
Errors:

  Data path "" should have required property 'name'.
[ERROR] Could not generate component.

[davl3232]

This works:

ng g c components/tree --project=wo-mobile
Your global Angular CLI version (7.2.2) is greater than your local
version (6.1.2). The local Angular CLI version is used.

To disable this warning use "ng config -g cli.warnings.versionMismatch false".
CREATE apps/wo-mobile/src/app/components/tree/tree.component.css (0 bytes)
CREATE apps/wo-mobile/src/app/components/tree/tree.component.html (23 bytes)
CREATE apps/wo-mobile/src/app/components/tree/tree.component.spec.ts (614 bytes)
CREATE apps/wo-mobile/src/app/components/tree/tree.component.ts (262 bytes)
UPDATE apps/wo-mobile/src/app/app.module.ts (3102 bytes)

EDIT: Though, I believe it skips the schematics of this project.

[imhoffd]

What is wo-mobile? I'm not seeing that project in your angular.json.

[davl3232]

wo-mobile is the ionic project inside the monorepo I mentioned before.
EDIT: And the angular.json from before is the one I have for that project.
This is the angular.json of the monorepo:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "",
  "projects": {
    "wo-frontend": {
      "root": "apps/wo-frontend",
      "sourceRoot": "apps/wo-frontend/src",
      "projectType": "application",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/apps/wo-frontend",
            "index": "apps/wo-frontend/src/index.html",
            "main": "apps/wo-frontend/src/main.ts",
            "polyfills": "apps/wo-frontend/src/polyfills.ts",
            "tsConfig": "apps/wo-frontend/tsconfig.app.json",
            "assets": [
              "apps/wo-frontend/src/assets",
              "apps/wo-frontend/src/favicon.ico"
            ],
            "styles": [
              "apps/wo-frontend/src/styles.css",
              "apps/wo-frontend/src/stimulsoft/stimulsoft.designer.office2013.whiteblue.css",
              "apps/wo-frontend/src/stimulsoft/stimulsoft.viewer.office2013.whiteblue.css"
            ],
            "scripts": [
              "node_modules/materialize-css/dist/js/materialize.min.js",
              "apps/wo-frontend/src/stimulsoft/stimulsoft.reports.js",
              "apps/wo-frontend/src/stimulsoft/stimulsoft.viewer.js",
              "apps/wo-frontend/src/stimulsoft/stimulsoft.designer.js",
              "node_modules/chart.js/dist/Chart.js"
            ]
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "apps/wo-frontend/src/environments/environment.ts",
                  "with": "apps/wo-frontend/src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "wo-frontend:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "wo-frontend:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "wo-frontend:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "apps/wo-frontend/src/test.ts",
            "polyfills": "apps/wo-frontend/src/polyfills.ts",
            "tsConfig": "apps/wo-frontend/tsconfig.spec.json",
            "karmaConfig": "apps/wo-frontend/karma.conf.js",
            "styles": [
              "apps/wo-frontend/src/styles.css",
              "apps/wo-frontend/src/stimulsoft/stimulsoft.designer.office2013.whiteblue.css",
              "apps/wo-frontend/src/stimulsoft/stimulsoft.viewer.office2013.whiteblue.css"
            ],
            "scripts": [
              "node_modules/materialize-css/dist/js/materialize.min.js",
              "apps/wo-frontend/src/stimulsoft/stimulsoft.reports.js",
              "apps/wo-frontend/src/stimulsoft/stimulsoft.viewer.js",
              "apps/wo-frontend/src/stimulsoft/stimulsoft.designer.js",
              "node_modules/chart.js/dist/Chart.js"
            ],
            "assets": [
              "apps/wo-frontend/src/assets",
              "apps/wo-frontend/src/favicon.ico"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "apps/wo-frontend/tsconfig.app.json",
              "apps/wo-frontend/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "wo-frontend-e2e": {
      "root": "apps/wo-frontend-e2e",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "apps/wo-frontend-e2e/protractor.conf.js",
            "devServerTarget": "wo-frontend:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "wo-frontend:serve:production"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "apps/wo-frontend-e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "modelo": {
      "root": "libs/modelo",
      "sourceRoot": "libs/modelo/src",
      "projectType": "library",
      "prefix": "wo-frontend",
      "architect": {
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "libs/modelo/src/test.ts",
            "tsConfig": "libs/modelo/tsconfig.spec.json",
            "karmaConfig": "libs/modelo/karma.conf.js"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "libs/modelo/tsconfig.lib.json",
              "libs/modelo/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "servicios": {
      "root": "libs/servicios",
      "sourceRoot": "libs/servicios/src",
      "projectType": "library",
      "prefix": "wo-frontend",
      "architect": {
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "libs/servicios/src/test.ts",
            "tsConfig": "libs/servicios/tsconfig.spec.json",
            "karmaConfig": "libs/servicios/karma.conf.js"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "libs/servicios/tsconfig.lib.json",
              "libs/servicios/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "wo-mobile": {
      "root": "apps/wo-mobile",
      "sourceRoot": "apps/wo-mobile/src",
      "projectType": "application",
      "prefix": "womo",
      "schematics": {
        "@schematics/angular:component": {
          "styleext": "scss"
        }
      }
    }
  },
  "defaultProject": "wo-frontend",
  "schematics": {
    "@schematics/angular:component": {
      "prefix": "app",
      "styleext": "css"
    },
    "@schematics/angular:directive": {
      "prefix": "app"
    }
  },
  "cli": {
    "defaultCollection": "@nrwl/schematics"
  }
}

[imhoffd]

In my monorepo, all Ionic apps and other libs share a single angular.json at the root of the repo, along with a single ionic.config.json, using multi-app config.

I see that you're using nrwl schematics. Depending on how your repo is setup, the Ionic CLI may be operating on the wrong angular.json (which would take effect when the Angular CLI runs in either the project directory or the root directory).

I'm sure there's something going wrong here, but without an example repo of the problem, I'm mostly guessing here.

[davl3232]

Hey @dwieeb, it seems I managed to fix this for the project I showed here. I just upgraded from angular 6 to 7 and did a revision of the files generated by Ionic.

I created a blank app using the latest version of Ionic cli, and compared the root files it generated with the ones I had on my ionic sub-project.

It seems I'd inherited some bad configurations either from the first Ionic 4 beta or from nrwl.

Thus I made this change to my angular.json:

From:

{
...
  "cli": {
    "defaultCollection": "@ionic/schematics-angular"
  },
  "schematics": {
    "@ionic/schematics-angular:component": {
      "styleext": "scss"
    },
    "@ionic/schematics-angular:page": {
      "styleext": "scss"
    }
  }
}

To:

{
...
  "cli": {
    "defaultCollection": "@ionic/angular-toolkit"
  },
  "schematics": {
    "@ionic/angular-toolkit:component": {
      "styleext": "scss"
    },
    "@ionic/angular-toolkit:page": {
      "styleext": "scss"
    }
  }
}

After doing this change, I can successfully use ionic generate for modules, pages and components without issues.

Thank you for your help @dwieeb.

[imhoffd]

Awesome! Thanks for following up. Glad everything is working for you. 👍