ionicons

ionicons copied to clipboard

I am serving my application's "index.html" file from a different domain and my ionic application is hosted on CDN domain.

Build Command ng build --prod --aot --build-optimizer --output-hashing none --deploy-url https://myappv1.mycdn.in/.

Here --deploy-url is my CDN domain.

Current behavior: When I am using <ion-back-button defaultHref="/"></ion-back-button> it's loading *.svg file dynamically. Whom path is related to "base-href" tag or hosted domain.

Expected behavior: I want to prefix CDN domain before all *.svg file which is dynamically generating by ionic components so *.svg path will not be pointed to the hosted domain.

Problem Statement Not getting the option to prefix CDN domain before *.svg file which is dynamically getting loaded by ionic components.

I am able to prefix the CDN domain before "assets" folder files but not able to do the same with ionic components related svg file. Because I don't know the entry point of the same.

Proposed/Expected solution All ionic components lazy loaded files should have prefixed --deploy-url path. For example if my --deploy-url https://myappv1.mycdn.in/ is while building my app. Svg file path of ionic components should be like https://myappv1.mycdn.in/svg/md-arrow-back.svg.

Ionic Info Ionic CLI: 4.10.3 Angular CLI: 7.3.3 Node: 10.15.1 Npm: 6.8.0 OS: darwin x64 (macOs Mojave, Version: 10.14.1)

Also need to use CDN but cannot because of this issue.

Also ionic-team/ionicons#705 seems related.

For those interested, I am using the following hack to change the base URL of icons.

I put this code at declaration level (outside functions) in the same file as my main NgModule, The technique should work in principle with frameworks other than Angular.

import * as loaderModule from "@ionic/core/loader";

overrideIonicLoaderOptions({
    resourcesUrl: "http://example.com/resources",
});

function overrideIonicLoaderOptions(optionOverrides: loaderModule.CustomElementsDefineOptions) {
    const originalFn = loaderModule.defineCustomElements;
    const overriddenFn = function(this: unknown, win: Window, options: loaderModule.CustomElementsDefineOptions) {
        return originalFn.call(this, win, Object.assign({}, options, optionOverrides));
    };
    Object.defineProperty(loaderModule, "defineCustomElements", {
        get() { return overriddenFn; },
    });
}

@lorenzodallavecchia are you calling this in app.module.ts?

I'm getting the error: Cannot redefine property: defineCustomElements.

@Souleste

That hack does not work when targeting ES2015 or later, because the defileCustomElements property is not configurable. Some months ago I had to update my TypeScript target from es5 to es2015 to use Angular 12 and had the same problem that you are facing now.

Unfortunately, the only solution was to abandon the hack and deploy the files locally where Ionic expects them.

This is a few years late and deploy-url is deprecated.

But one approach to hosting the svg icons yourself is to expose the folder node_modules/ionicons/dist/ionicons instead of only the svg subfolder. (You can expose this folder through the angular.json)

In the folder, there are two scripts ionicons.esm.js and ionicons.js. Add script tags to those files in index.html.

<script type="module" src="some-path/ionicons.esm.js"></script>
<script nomodule src="some-path/ionicons.js"></script>

The approach is a variation of Ionic Icons's docs for loading icons from a CDN https://ionic.io/ionicons/usage