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.13k stars 13.5k forks source link

Bug in IONIC-CLI 3.6.0 (Missing @IonicPage decorator) #12506

Closed mahmoudrabie closed 7 years ago

mahmoudrabie commented 7 years ago

Ionic version:
[ x ] 3.x

I'm submitting a ... [ x ] bug report

Current behavior: Thanks to IONIC Team for adding back the functionality of generating lazy loaded pages. However, the generated page component file doesn't contain @IonicPage()

Expected behavior: For lazy loading, it must include that decorator above @Component

Steps to reproduce: ionic g page ClassesAdd

Related code:

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
/**
 * Generated class for the ClassesAddPage page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */
@Component({
  selector: 'page-classes-add',
  templateUrl: 'classes-add.html',
})
export class ClassesAddPage {

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad ClassesAddPage');
  }

}
q769073309 commented 7 years ago

+1 missing .module.ts file too

gvhuyssteen commented 7 years ago

+1

By running ionic g page testPage , I get:

import { Component } from '@angular/core';
$IMPORTSTATEMENT

/**
 * Generated class for the TestPage page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */
$IONICPAGE
@Component({
  selector: 'page-test',
  templateUrl: 'test.html',
})
export class TestPage {

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad TestPage');
  }

}

Notice $IMPORTSTATEMENT and $IONICPAGE

jgw96 commented 7 years ago

Hello all! What version of app-scripts do you have installed? Would you mind posting the output of ionic info here please?

mhartington commented 7 years ago

Hi, can you please update to ionic-angular 3.6? There were some changes needed in the ionic-angular templates in order to support lazy-loading and non-lazy loaded pages. From whats been reported it looks like you have the latest app-scripts and CLI, but not the framework. Please update that as well 😄

mahmoudrabie commented 7 years ago

Thanks a lot for your support. $ ionic info

cli packages:
    @ionic/cli-plugin-cordova       : 1.5.0 (PROJ_DIR/node_modules/@ionic/cli-plugin-cordova)
    @ionic/cli-plugin-ionic-angular : 1.4.0 (PROJ_DIR/node_modules/@ionic/cli-plugin-ionic-angular)
    @ionic/cli-plugin-proxy         : 1.4.0 (PROJ_DIR/node_modules/@ionic/cli-plugin-proxy)
    @ionic/cli-utils                : 1.6.0 (PROJ_DIR/node_modules/@ionic/cli-utils)
    ionic (Ionic CLI)               : 3.6.0 (PROJ_DIR/node_modules/ionic)

global packages:
    Cordova CLI : 7.0.1

local packages:
    @ionic/app-scripts : 2.1.3
    Cordova Platforms  : android 6.2.3 ios 4.4.0
    Ionic Framework    : ionic-angular 3.5.3

System:
    Node       : v6.11.0
    OS         : macOS Sierra
    Xcode      : Xcode 8.3.3 Build version 8E3004b
    ios-deploy : 1.9.1
    ios-sim    : 5.1.0
    npm        : 5.3.0

Please reopen the issue. What does need update?

q769073309 commented 7 years ago

here is my info,I have updated ionic-angular to the latest version，but the problem is still exist: cli packages:

@ionic/cli-utils  : 1.6.0 
ionic (Ionic CLI) : 3.6.0

global packages:

Cordova CLI : 6.2.0

local packages:

@ionic/app-scripts              : 2.1.3
@ionic/cli-plugin-cordova       : 1.4.0
@ionic/cli-plugin-ionic-angular : 1.3.1
Cordova Platforms               : android 5.1.1
Ionic Framework                 : ionic-angular 3.6.0

System:

Node  : v6.11.1
OS    : macOS Sierra
Xcode : Xcode 8.3.3 Build version 8E3004b 
npm   : 5.3.0
raykin commented 7 years ago

same problem here.

cli packages:

    @ionic/cli-utils  : 1.6.0 (/Users/raykin/studio/aska/node_modules/ionic/node_modules/@ionic/cli-utils)
    ionic (Ionic CLI) : 3.6.0 (/Users/raykin/studio/aska/node_modules/ionic)

global packages:

    Cordova CLI : 6.5.0
    Gulp CLI    : CLI version 3.9.1 Local version 3.9.1

local packages:

    @ionic/app-scripts              : 2.1.3
    @ionic/cli-plugin-cordova       : 1.4.1
    @ionic/cli-plugin-gulp          : 1.0.2
    @ionic/cli-plugin-ionic-angular : 1.3.2
    Cordova Platforms               : ios 4.1.1
    Ionic Framework                 : ionic-angular 3.6.0

System:

    Node       : v7.9.0
    OS         : macOS Sierra
    Xcode      : Xcode 8.3.3 Build version 8E3004b
    ios-deploy : 1.9.1
    ios-sim    : 5.1.0
    npm        : 5.3.0
mhartington commented 7 years ago

Can you run npm i @ionic/cli-plugin-ionic-angular@latest --save-dev

raykin commented 7 years ago

@mhartington updated it to 1.4.0, but still not work. 

~/studio/aska (master ✘)✹✭ ᐅ ionic info

cli packages:

    @ionic/cli-plugin-ionic-angular : 1.4.0 (/Users/raykin/studio/aska/node_modules/@ionic/cli-plugin-ionic-angular)
    @ionic/cli-utils                : 1.6.0 (/Users/raykin/studio/aska/node_modules/ionic/node_modules/@ionic/cli-utils)
    ionic (Ionic CLI)               : 3.6.0 (/Users/raykin/studio/aska/node_modules/ionic)

global packages:

    Cordova CLI : 6.5.0
    Gulp CLI    : CLI version 3.9.1 Local version 3.9.1

local packages:

    @ionic/app-scripts        : 2.1.3
    @ionic/cli-plugin-cordova : 1.4.1
    @ionic/cli-plugin-gulp    : 1.0.2
    Cordova Platforms         : ios 4.1.1
    Ionic Framework           : ionic-angular 3.6.0

System:

    Node       : v7.9.0
    OS         : macOS Sierra
    Xcode      : Xcode 8.3.3 Build version 8E3004b
    ios-deploy : 1.9.1
    ios-sim    : 5.1.0
    npm        : 5.3.0
raykin commented 7 years ago

how can I found docs for $ usage and where to find the $IMPORTTANTSTATEMENT ?

mhartington commented 7 years ago

@raykin can you try one of the following?

1) delete node modules and package-lock.json file? 2) start a new project and test the generators out?

Im unable to replicate this at all on my end.

``` $ ionic info cli packages: @ionic/cli-plugin-ionic-angular : 1.4.0 (/Users/mhartington/GitHub/tmp/node_modules/@ionic/cli-plugin-ionic-angular) @ionic/cli-utils : 1.6.0 (/Users/mhartington/GitHub/tmp/node_modules/@ionic/cli-utils) ionic (Ionic CLI) : 3.6.0 (/Users/mhartington/GitHub/tmp/node_modules/ionic) local packages: @ionic/app-scripts : 2.1.3 Ionic Framework : ionic-angular 3.6.0 System: Android SDK Tools : 25.2.5 Node : v8.2.1 OS : macOS High Sierra Xcode : Xcode 9.0 Build version 9M136h ios-deploy : 1.9.1 ios-sim : 5.0.13 npm : 5.3.0 ```
mahmoudrabie commented 7 years ago

Mike was right. It was Ionic Framework : ionic-angular 3.5.3 Now it is Ionic Framework : ionic-angular 3.6.3

Now, It is working perfect.

Thanks a lot.

mahmoudrabie commented 7 years ago

Correction Ionic Framework : ionic-angular 3.6.0

q769073309 commented 7 years ago

my problem is solved ,after update cli-plugin-ionic-angular to the latest version,Thanks a lot

mhartington commented 7 years ago

Thanks, closing.

jasonz1987 commented 7 years ago

still not working...

my environment:

cli packages: (/Users/tuo3/git/drip-ionic3/node_modules)

@ionic/cli-utils  : 1.10.2
ionic (Ionic CLI) : 3.10.3

global packages:

Cordova CLI : 7.0.1

local packages:

@ionic/app-scripts : 1.3.12
Cordova Platforms  : android 6.2.3 ios 4.4.0
Ionic Framework    : ionic-angular 3.6.1

System:

ios-deploy : 1.9.1 
ios-sim    : 4.1.1 
Node       : v7.3.0
npm        : 4.0.5 
OS         : macOS Sierra
Xcode      : Xcode 8.3.3 Build version 8E3004b
q769073309 commented 7 years ago

you need update ionic/app-scripts to the latest version

ionitron-bot[bot] commented 6 years ago

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.