Damir's Corner.

Fixing Ionic Generate for Old Projects

Ionic Generate command is a handy tool for creating new pages, components, providers and other file types in Ionic applications. It strongly relies on the standard Ionic project structure. Since the recommended project structure has changed quite a lot since the initial release of Ionic 2, the command might not work as expected on older projects if their structure has not been kept up-to-date.

Pages

Page generation has changed to conform with the requirements of lazy loading. By following a guide to introduce lazy loading support in an existing Ionic application, all the necessary changes to the project structure are already done. Generating a page with the following command will work as expected:

ionic generate page sample

In the following sections I also assume that old projects have already been updated to support lazy loading.

Components

Component files are still being placed in a subfolder of src/components, i.e. after invoking the command:

ionic generate component sample

The following files will be placed in folder src/components/sample:

• sample.html
• sample.scss
• sample.ts

The component will also be added to the declarations and exports arrays of the common ComponentsModule in src/components/components.module.ts. For that to work, the command doesn't like any customizations of the file which might have been introduced earlier to make manual editing easier, e.g. a common array used for both declarations and exports:

let components: Array<any> = [
    SampleComponent,
    AnotherComponent
]
@NgModule({
    declarations: [...components],
    imports: [],
    exports: [...components]
})
export class ComponentsModules {}

Such changes will need to be reverted back to the original state of the file or the command will not work correctly:

@NgModule({
    declarations: [
        SampleComponent,
        AnotherComponent
    ],
    imports: [],
    exports: [
        SampleComponent,
        AnotherComponent
    ]
})
export class ComponentsModules {}

Directives

Directives were previously placed in src/components subfolders just like components, with the exception that the folder only contained a single file, e.g. src/components/sample/sample.ts in case of the following command:

ionic generate directive sample

In recent versions, directives are placed inside the src/directives folder, still each in its own subfolder. As a result, they are included in a separate DirectivesModule. For the sake of consistency, it makes sense to move existing directives to the src/directives folder and DirectivesModule:

@NgModule({
    declarations: [
        SampleDirective,
        AnotherDirective
    ],
    imports: [],
    exports: [
        SampleDirective,
        AnotherDirective
    ]
})
export class DirectivesModule {}

In all other files, import statements for the moved directives will need to be updated accordingly. Also, the DirectivesModule will need to be imported instead of the ComponentsModule in all modules which use any of the directives. If they also use any of the components, the ComponentsModule will still need to be imported as well.

Providers

Providers used to be created directly in the src/provider folder. Now, each provider is created in its own subfolder inside src/providers. The following command will create a new provider:

ionic generate provider sample

Apart from creating a new file src/providers/sample/sample.ts, it will also automatically add the provider to the providers array of AppModule.

Although existing providers placed in the src/provider folder don't interfere with the command, it's still a good idea to move each file into its own subfolder to maintain consistency in the project. After moving the file, all import statements for this provider in other files will need to be updated with the new path.

Other File Types

In addition to the file types described above, tabs and pipes can also be generated. In my case neither of them required special attention:

• I had no custom pipes of my own in the project.
• Tabs are just a special case of pages following exactly the same rules.