Extending Ionic Directives

Ionic Framework ionic-v3
1

Hello guys.

I’m trying extends all components from ionic for use customized tags - I wish use “my-button” instead of “ion-button”, but keep all features that ionic components already has.

Another thing I want is customize some styles. I want use our design patterns.

But, I’m having some problems build with --prod flag.

Actually, I have the class “MyChip” extending “Chip”:

MyChip:

@Directive({
  selector: 'my-chip'
})
export class MyChip extends Chip {
  constructor(config: Config, elementRef: ElementRef, renderer: Renderer) {
    super(config, elementRef, renderer);
  }
}

My problem happen when I export this directive in my module. In dev mode, everything works fine, but when I build with “–prod” flag, simply doesn’t run on mobile, with the message:

Uncaught TypeError: Object prototype may only be an Object or null: undefined
    at setPrototypeOf (<anonymous>)
    at r (main.js:34)
    at main.js:34
    at Object.<anonymous> (main.js:34)
    at e (main.js:1)
    at Object.<anonymous> (main.js:21)
    at e (main.js:1)
    at Object.<anonymous> (main.js:21)
    at e (main.js:1)
    at Object.<anonymous> (main.js:21)

If I remove inheritance, app works correctly on device with --prod.

Can anybody help me? What’s the correct way to do that? I just want customize tags and attributes, and too some css (styles).

Thank you so much

2

What do your import statements look like when you import the component?

3

Hi Aaron.

I created a module for each component.

MyChip:

@Directive({
  selector: 'my-chip'
})
export class MyChip extends Chip {
  constructor(config: Config, elementRef: ElementRef, renderer: Renderer) {
    super(config, elementRef, renderer);
  }
}

MyChipModule:

@NgModule({
  declarations: [
    MyChip,
  ],
  imports: [
    IonicModule.forRoot(MyChip),
  ],
  exports: [
    MyChip
  ]
})
export class MyChipModule {}

And my general module, where I wish group all my components, to be used on “imports” on App Module:

@NgModule({
  declarations: [],
  imports: [ MyChipModule ],
  exports: [ MyChipModule ],
  providers: [],
  bootstrap: []
})
export class MyComponentsModule { }
4

You didn’t post a single import statement. You don’t have to of course, but if you want my advice, I need to see all the import statements.

5

Ok, I’m sorry.

import { Chip, Config, Ion } from 'ionic-angular';
import { Directive, ElementRef, Renderer } from '@angular/core';

@Directive({
  selector: 'my-chip'
})
export class MyChip extends Chip {

  constructor(config: Config, elementRef: ElementRef, renderer: Renderer) {
    super(config, elementRef, renderer);
  }
}

import { NgModule } from '@angular/core';
import { IonicModule } from 'ionic-angular';
import { MyChip } from './my-chip.component';

@NgModule({
  declarations: [
    MyChip,
  ],
  imports: [
    IonicModule.forRoot(MyChip),
  ],
  exports: [
    MyChip
  ]
})
export class ThfChipModule {}

Is that what you need?

6

These. ngc with webpack throws this error if the imports are a little off. So any import of MyChip is suspect. The combination of inheritance and lazy loading might make webpack more annoyed too. The basic idea is that if your component is in ‘component/component’ and you only import it from ‘component’ then it works in most situations, but not in when building for production. And more might be going on because of lazy loading, I don’t know. Anyway, I have to step away, so I might be useless to you. But here’s a sample thread about what might be the issue. The fix might be as simple as changing the order of your imports or exactly how they work, or it might involve digging into Ionic, I don’t know yet. Good luck.

7

I think this is a bad road to start down. There’s no guarantee that implementation details of Ionic components won’t change from version to version, and you are tying your code very tightly to them.

8

Thanks rapropos.

About my needs, suggests some solution?

I don’t know how can solve it.

9

What can’t you do just by customizing SCSS variables?

10

About customizing scss variables ok, but my bigger problem is customized tags. I’m thinking about forking ionic project for it.

11

I have the same issue. It happens when you run a build with --optimizejs parameter, ex:

ionic cordova run android --optimizejs

This is a peace of my main.js bundle.

var __extends = (this && this.__extends) || (function () {
    var extendStatics = Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
    return function (d, b) {
        extendStatics(d, b); //<--- ERROR: Uncaught TypeError: Object prototype may only be an Object or null: undefined
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
Object.defineProperty(exports, "__esModule", { value: true });
var forms_1 = __webpack_require__(19);
var core_1 = __webpack_require__(0);
var ionic_angular_1 = __webpack_require__(2);
exports.MY_MODULE_VALUE_ACCESSOR = {
    provide: forms_1.NG_VALUE_ACCESSOR,
    useExisting: core_1.forwardRef(function () { return MyComponent; }),
    multi: true
};

The ‘b’ parameter is undefined when the function extendStatics(d, b); is called, the ‘d’ parameter is MyComponent . I created MyComponent from another ionic component. Although I have come up with this problem, I still have not found the solution.

12

@rafaelquines I know I’m 2 years too late but did you ultimately find a solution to your problem of extending ionic components? I would like to do the same (though in Ionic 4) and am running into problems similar to the ones you described ITT