Best practices for cloning/improving an existing Ionic4 component

Hello, I have one goal in my life.

I’m using Angular 4.

I want to add some extra functionalities to the already existing Ionic component: Range:

For example, imagine that when the user clickdown the knobs they become red.

Later on, I would like to use that improved component on an Angular 6 project, but that will be after I pass the current goal.

I would like to know what’s the best practice to improve this component.

Can I start by copying the files on:

inside a new directory I would create for this kind of purposes?, for example:


I want the new selector to be: custom-range so I understand I have to modify the file:

Any help on this that let me start will be highly appreciated.


I think the best practice would be: Learn StencilJS. Modify the Ionic source code with your new Stencil skill, to be whatever you want. Post on a repo if you’re proud of your work and want to share with the community.

I just created the repository:

based on the repository:

then copied the Ionic component range:



but when opening the project on VS Code I get the following errors:

range.tsx src\components\custom-range
- Cannot find module '../../interface'.
- Cannot find module '../../utils/helpers'.
- Cannot find module '../../utils/theme'.
- Dynamic import is only supported when '--module' flag is 'commonjs' or 'esNext'.
- Cannot find module '../../utils/gesture/gesture'.

as you can see on the following image:

Any idea on how to include those missing references into my project?