search

ionic-team / ionic-framework

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
https://ionicframework.com
MIT License
51.07k stars 13.51k forks source link

V4 Ionic g Component no longer working after upgrade @angular-devkit/schematics #16443

Closed bkarv closed 5 years ago

bkarv commented 5 years ago

Bug Report

Ionic Info Run ionic info from a terminal/cmd prompt and paste the output below.

   ionic (Ionic CLI)             : 4.4.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0-beta.16
   @angular-devkit/build-angular : 0.10.6
   @angular-devkit/schematics    : 0.7.5
   @angular/cli                  : 7.0.6
   @ionic/angular-toolkit        : 1.2.0

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : none
   Cordova Plugins       : no whitelisted plugins (0 plugins total)

System:

   NodeJS : v10.13.0 (/usr/local/bin/node)
   npm    : 6.4.1
   OS     : macOS

Describe the Bug After upgrading and following the dependancies as stated in 4.0.0-beta.16 (2018-11-16) changelog as below, ionic g component no longer works. I get the following error:

Error: Could not find module "@ionic/schematics-angular" from ....

From Changelog fo Ionic beta 16

"dependencies": {
  "@angular/common": "~7.0.3",
  "@angular/core": "~7.0.3",
  "@angular/forms": "~7.0.3",
  "@angular/http": "~7.0.3",
  "@angular/platform-browser": "~7.0.3",
  "@angular/platform-browser-dynamic": "~7.0.3",
  "@angular/router": "~7.0.3",
  "rxjs": "6.3.3",
"devDependencies": {
  "@angular-devkit/architect": "~0.10.5",
  "@angular-devkit/build-angular": "~0.10.5",
  "@angular-devkit/core": "~7.0.5",
  "@angular-devkit/schematics": "~7.0.5",
  "@angular/cli": "~7.0.3",
  "@angular/compiler": "~7.0.3",
  "@angular/compiler-cli": "~7.0.3",
  "@angular/language-service": "~7.0.3",

Steps to Reproduce Steps to reproduce the behavior:

  1. Go to '...'
  2. Click on '....'
  3. Scroll down to '....'
  4. See error

Related Code My package.json

{
  "name": "myapp",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^7.0.4",
    "@angular/cdk": "^7.0.4",
    "@angular/common": "~7.0.3",
    "@angular/core": "~7.0.3",
    "@angular/forms": "~7.0.3",
    "@angular/http": "~7.0.3",
    "@angular/material": "^7.0.4",
    "@angular/platform-browser": "~7.0.3",
    "@angular/platform-browser-dynamic": "~7.0.3",
    "@angular/router": "~7.0.3",
    "@auth0/angular-jwt": "^2.0.0",
    "@ionic-native/camera": "^5.0.0-beta.21",
    "@ionic-native/core": "^5.0.0-beta.21",
    "@ionic-native/file": "^5.0.0-beta.21",
    "@ionic-native/file-transfer": "^5.0.0-beta.21",
    "@ionic-native/in-app-browser": "^5.0.0-beta.21",
    "@ionic-native/keyboard": "^5.0.0-beta.21",
    "@ionic-native/splash-screen": "^5.0.0-beta.21",
    "@ionic-native/sqlite": "^4.17.0",
    "@ionic-native/status-bar": "^5.0.0-beta.21",
    "@ionic/angular": "^4.0.0-beta.16",
    "@ionic/storage": "^2.2.0",
    "@types/lodash": "^4.14.116",
    "@types/mime-types": "^2.1.0",
    "@types/zxcvbn": "^4.4.0",
    "angular-password-strength-meter": "0.0.4",
    "cordova-browser": "5.0.4",
    "cordova-plugin-camera": "^4.0.3",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-file": "^6.0.1",
    "cordova-plugin-file-transfer": "^1.7.1",
    "cordova-plugin-inappbrowser": "^3.0.0",
    "cordova-plugin-ionic-keyboard": "^2.1.3",
    "cordova-plugin-ionic-webview": "^2.2.0",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "cordova-sqlite-storage": "^2.4.0",
    "core-js": "^2.5.3",
    "mime": "^2.3.1",
    "mobile-drag-drop": "^2.3.0-rc.1",
    "ngx-autosize": "^1.2.0",
    "ngx-drag-drop": "^1.1.0",
    "ngx-filesaver": "^2.1.1",
    "ngx-order-pipe": "^2.0.1",
    "ngx-quill-editor": "^2.2.2",
    "rxjs": "6.3.3",
    "rxjs-compat": "6.3.3",
    "zone.js": "^0.8.26",
    "zxcvbn": "^4.4.2"
  },
  "devDependencies": {
    "@angular-devkit/architect": "~0.10.5",
    "@angular-devkit/build-angular": "~0.10.5",
    "@angular-devkit/core": "~7.0.5",
    "@angular-devkit/schematics": "~7.0.5",
    "@angular/cli": "~7.0.3",
    "@angular/compiler": "~7.0.3",
    "@angular/compiler-cli": "~7.0.3",
    "@angular/language-service": "~7.0.3",
    "@ionic/angular-toolkit": "^1.2.0",
    "@types/file-saver": "~1.3.0",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~10.9.2",
    "angular2-uuid": "^1.1.1",
    "aws-sdk": "^2.314.0",
    "blueimp-canvas-to-blob": "^3.14.0",
    "codelyzer": "~4.5.0",
    "dom-to-image": "^2.6.0",
    "expr-eval": "^1.2.1",
    "file-saver": "^1.3.8",
    "ionic-angular": "^3.9.2",
    "ionic-plugin-keyboard": "~2.2.1",
    "ionicons": "3.0.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "lodash": "^4.17.11",
    "mime-types": "^2.1.18",
    "moment": "^2.22.1",
    "ng-elastic": "^1.0.0-beta.5",
    "ng2-img-max": "^2.1.18",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.1.6",
    "uuid": "^3.2.1",
    "xlsx": "^0.13.0"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-sqlite-storage": {},
      "cordova-plugin-file": {},
      "cordova-plugin-file-transfer": {},
      "cordova-plugin-camera": {},
      "cordova-plugin-inappbrowser": {},
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-ionic-keyboard": {}
    },
    "platforms": [
      "browser"
    ]
  }
}

Expected Behavior ionic g component XXX should work as normal.

bkarv commented 5 years ago

Also current workaround for the above is to re-install ionic schematics despite it being deprecated.

npm install @ionic/schematics-angular@latest

abennouna commented 5 years ago

When you use @ionic/angular-toolkit as a dependency, you also need to update angular.json by replacing all occurrences of @ionic/ng-toolkit and @ionic/schematics-angular by @ionic/angular-toolkit.

Starting from apps created with v4.0.0-beta.13, nothing to do.

mhartington commented 5 years ago

Schematics and all things related to angular tooling are now part of @ionic/angular-toolkit

as @abennouna has said, please update to @ionic/angular-toolkit and update any references in your angular.json

bkarv commented 5 years ago

Thanks @abennouna I think that resolved the issue. Note these instructions weren't in the dependancies notes for 4.0.0-beta.16 changelog