Migration to Ionic v4 - Cannot use Module's component

Ionic Framework ionic-v3
1

Hi,

I’m migrating my project from v3 to v4 and I’m struggling to build it.

My project points to a NPM package (ionic-stepper) that is not supported on v3, so I decided to download its code from Github and adapt that so I can use it on v4. Apparently I just needed to change few bits of it, like renaming ionic-angular to @ionic/angular.

I did that by downloading the ionic-stepper code and placed it inside my components folder.
This is what I have inside src/app/components/ionic-stepper:

  • ionic-step-header.scss
  • ionic-step-header.ts
  • ionic-step.ts
  • ionic-stepper-animations.ts
  • ionic-stepper-button.ts
  • ionic-stepper.module.ts
  • ionic-stepper.scss
  • ionic-stepper.ts
  • variables.scss

ionic-stepper.module.ts has the following content:

import { NgModule } from '@angular/core';
import { IonicStepperComponent } from './ionic-stepper';
import { IonicStepComponent } from './ionic-step';
import { IonicStepHeaderComponent } from './ionic-step-header';
import { IonicStepperNext, IonicStepperPrevious } from './ionic-stepper-button';

@NgModule({
  declarations: [
	  IonicStepperComponent,
	  IonicStepComponent,
	  IonicStepHeaderComponent,
	  IonicStepperNext,
	  IonicStepperPrevious  
  ],
  imports: [
  ],
  exports: [
	  IonicStepperComponent,
	  IonicStepComponent,
	  IonicStepHeaderComponent,
	  IonicStepperNext,
	  IonicStepperPrevious  
  ]
})

export class IonicStepperModule {
}

Then, on src/app/components I have a components.module.ts file that includes all the components I have created myself inside my application. In another words, in this path I have multiple folders, including now the ionic-stepper. I don’t have problems with the other components, just with the ionic-stepper.

Inside the src/app/components/components.module.ts file (module that aggregates all components I have inside the components folder), this is what I have:

import { NgModule } from '@angular/core';

import { IonicModule } from '@ionic/angular';

import { QuizComponent } from './quiz/quiz';
import { ShrinkingSegmentHeaderComponent } from './shrinking-segment-header/shrinking-segment-header';

import { IonicStepperComponent } from './ionic-stepper/ionic-stepper';
import { IonicStepComponent } from './ionic-stepper/ionic-step';
import { IonicStepHeaderComponent } from './ionic-stepper/ionic-step-header';
import { IonicStepperNext, IonicStepperPrevious } from './ionic-stepper/ionic-stepper-button';

@NgModule({
	declarations: [
		QuizComponent,
		ShrinkingSegmentHeaderComponent,
		... (other components)
		IonicStepperComponent,
		IonicStepComponent,
		IonicStepHeaderComponent,
		IonicStepperNext,
		IonicStepperPrevious     	
	],
	imports: [
		IonicModule.forRoot(),
		CurrencyMaskModule,
	],
	exports: [
		QuizComponent,
		ShrinkingSegmentHeaderComponent,
		... (other components)
		IonicStepperComponent,
		IonicStepComponent,
		IonicStepHeaderComponent,
		IonicStepperNext,
		IonicStepperPrevious 	    
	]
})
export class ComponentsModule {}

I also tried to refer to the IonicStepperModule (defined in src/app/components/ionic-stepper/ionic-stepper.module.ts) instead of each component as above, but the problem is exactly the same.

When I run ionic build, this is what I get:

> ng run app:build

src/app/pages/sign-in/sign-in.ts:147:50 - error TS2304: Cannot find name 'IonicStepperComponent'.

147   @ViewChild('stepper', {static: true}) stepper: IonicStepperComponent;
                                                     ~~~~~~~~~~~~~~~~~~~~~

[ERROR] An error occurred while running subprocess ng.
        
        ng run app:build exited with exit code 1.

I also verified and included the ComponentsModule (defined in src/app/components/components.module.ts) to the app.module.ts just to make sure it was visible to all pages, but nothing changed, I’m still with the error.

Any ideas?

UPDATE: If on src/app/pages/sign-in/sign-in.ts (Page where problem shows up), I go and declare the component directly like this:
import { IonicStepperComponent } from '../../components/ionic-stepper/ionic-stepper';
it works but ideally I wanted to refer to the ComponentsModule which refers to the IonicStepperModule.

Thanks!
Caio

2

This confuses me greatly. Can anybody (not meaning to pick on you personally here at all) explain any way in which this is better than throwing all that stuff in the AppModule?