Integrate V5 in angular #769

anthowm · 2020-02-09T01:39:23Z

Well now v5 didnt have scss so what is the correct way to integrate and consume this in angular ?

bleuscyther · 2020-02-09T15:13:47Z

In app.module.ts

import { NgModule, /** ADD THIS -> **/ CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
    declarations: [...],
    entryComponents: [...],
    imports: [...],
    exports: [...],
    providers: [...],
    schemas: [CUSTOM_ELEMENTS_SCHEMA] /** 👈🏻 ADD THIS **/ 
})
export AppModule {}

in src\index.html

<body>
  <app-root></app-root>
  <script src="https://unpkg.com/ionicons@5.0.0/dist/ionicons.js"></script>
</body>

Recompile/ Re-serve

anthowm · 2020-02-10T07:47:38Z

Thanks for the answer that works but is there a way to use it this way?
https://stackoverflow.com/questions/60133077/ionicons-version-5-with-angular

andreas-aeschlimann · 2020-02-12T17:29:58Z

While this works, it is not the Angular way to include scripts into index.html. I hope there is a cleaner way.

Does this mean we need to change all to <ion-icon name="xx", hence a lot of breaking change for non-Ionic projects?

andreas-aeschlimann · 2020-02-19T00:46:21Z

As @bleuscyther mentions, you can integrate the script in your index.html. There are two flaws in my view about this: It is 1) not the Angular way to integrate scripts in index.html and 2) it links an externally hosted script.

Number 2) can be fixed by locally installing Ionicons 5 with npm. But data within node_modules cannot be linked from index.html, so we need a script that copies the whole ionicons folder from node_modules into our application's assets.

This can be achieved as follows by modifying angular.json. Find the assets array in the build and test objects, then add the following lines:

{
  "glob": "**/*",
  "input": "./node_modules/ionicons",
  "output": "./assets/ionicons"
}

Then just link in index.html the right file. It should be: <script src="assets/ionicons/dist/ionicons/ionicons.esm.js" type="module"></script>

Number 1) seems to be tricky. After following the guide about integrating Stencil into an Angular app, I found that this approach works. Open main.ts in your Angular project and add the following code at the end:

import { applyPolyfills, defineCustomElements } from "ionicons/dist/loader";

applyPolyfills().then(() => {
  defineCustomElements(window, {
    resourcesUrl: "assets/ionicons/"
  });
});

This will basically tell the Ionicons script to look for the svg directory within assets/ionicons/. To be honest I don't know exactly why and I couldn't find documentation about it. Maybe someone from the Ionicon team can tell me if there is a better way to do this.

Anyway, all you then have to do is make sure that the svg directory is actually copied into your assets. I did this with a similar edit in angular.json as in the number 2) above:

{
  "glob": "**/*",
  "input": "./node_modules/ionicons/dist/svg",
  "output": "./assets/ionicons/svg"
 }

This will only copy the svg folder into the assets, because that is all we will need from there.

surmon-china · 2020-02-19T20:55:59Z

import * as icons from 'ionicons/icons';
import { DomSanitizer } from '@angular/platform-browser';
import { Component, OnInit } from '@angular/core';


@Component({
  selector: 'page-icons',
  templateUrl: './icons.component.html',
})
export class IconsComponent implements OnInit {
  icons: = icons;

  constructor(private domSanitizer: DomSanitizer) {}
}

<img [src]="domSanitizer.bypassSecurityTrustUrl(newIcons.heart)">

But can't control icon's (image) color.

streamliner18 · 2020-03-08T21:40:11Z

The color seems like a separate issue (#784 ) It works for icons that do not have a hard-coded stroke color.

codevladimir · 2020-04-29T22:12:21Z

As @bleuscyther mentions, you can integrate the script in your index.html. There are two flaws in my view about this: It is 1) not the Angular way to integrate scripts in index.html and 2) it links an externally hosted script.

Number 2) can be fixed by locally installing Ionicons 5 with npm. But data within node_modules cannot be linked from index.html, so we need a script that copies the whole ionicons folder from node_modules into our application's assets.

This can be achieved as follows by modifying angular.json. Find the assets array in the build and test objects, then add the following lines:
{
  "glob": "**/*",
  "input": "./node_modules/ionicons",
  "output": "./assets/ionicons"
}
Then just link in index.html the right file. It should be: <script src="assets/ionicons/dist/ionicons/ionicons.esm.js" type="module"></script>

Number 1) seems to be tricky. After following the guide about integrating Stencil into an Angular app, I found that this approach works. Open main.ts in your Angular project and add the following code at the end:
import { applyPolyfills, defineCustomElements } from "ionicons/dist/loader";

applyPolyfills().then(() => {
  defineCustomElements(window, {
    resourcesUrl: "assets/ionicons/"
  });
});
This will basically tell the Ionicons script to look for the svg directory within assets/ionicons/. To be honest I don't know exactly why and I couldn't find documentation about it. Maybe someone from the Ionicon team can tell me if there is a better way to do this.

Anyway, all you then have to do is make sure that the svg directory is actually copied into your assets. I did this with a similar edit in angular.json as in the number 2) above:
{
  "glob": "**/*",
  "input": "./node_modules/ionicons/dist/svg",
  "output": "./assets/ionicons/svg"
 }
This will only copy the svg folder into the assets, because that is all we will need from there.

When I do this, I do see the icon using <ion-icon name="heart"></ion-icon> but I also get an error inside cli 'ion-icon' is not a known element:

Any idea how to fix it?

andreas-aeschlimann · 2020-04-29T23:01:48Z

As @bleuscyther mentions, you can integrate the script in your index.html. There are two flaws in my view about this: It is 1) not the Angular way to integrate scripts in index.html and 2) it links an externally hosted script.

Number 2) can be fixed by locally installing Ionicons 5 with npm. But data within node_modules cannot be linked from index.html, so we need a script that copies the whole ionicons folder from node_modules into our application's assets.

This can be achieved as follows by modifying angular.json. Find the assets array in the build and test objects, then add the following lines:
{

"glob": "**/*",

"input": "./node_modules/ionicons",

"output": "./assets/ionicons"

}
Then just link in index.html the right file. It should be: <script src="assets/ionicons/dist/ionicons/ionicons.esm.js" type="module"></script>

Number 1) seems to be tricky. After following the guide about integrating Stencil into an Angular app, I found that this approach works. Open main.ts in your Angular project and add the following code at the end:
import { applyPolyfills, defineCustomElements } from "ionicons/dist/loader";

applyPolyfills().then(() => {

defineCustomElements(window, {
resourcesUrl: "assets/ionicons/"
});

});
This will basically tell the Ionicons script to look for the svg directory within assets/ionicons/. To be honest I don't know exactly why and I couldn't find documentation about it. Maybe someone from the Ionicon team can tell me if there is a better way to do this.

Anyway, all you then have to do is make sure that the svg directory is actually copied into your assets. I did this with a similar edit in angular.json as in the number 2) above:
{

"glob": "**/*",

"input": "./node_modules/ionicons/dist/svg",

"output": "./assets/ionicons/svg"

}
This will only copy the svg folder into the assets, because that is all we will need from there.

When I do this, I do see the icon using <ion-icon name="heart"></ion-icon> but I also get an error inside cli 'ion-icon' is not a known element:

Any idea how to fix it?

Doesn’t the second post in this issue fix it? It did for me.

codevladimir · 2020-05-02T01:23:19Z

Yeah, it worked. But I think this is still not ready for using in the latest angular.

przemekpobuta · 2020-05-31T14:55:27Z

The solution from @bleuscyther works fine, but mine not, which I consider the same, but from local node_modules:

"scripts": [
  "node_modules/ionicons/dist/ionicons.js"
]

Got this error instead:

GET http://localhost:4200/ionicons/ionicons.esm.js net::ERR_ABORTED 404 (Not Found)

Msender · 2020-07-22T14:08:51Z

Just add this to the assets in angular.json, and everything works.

 `{
      "glob": "**/*.svg",
      "input": "node_modules/ionicons/dist/ionicons/svg",
      "output": "./svg"
  },`

brandyscarney added the type: documentation label Sep 27, 2022

mogoe1 mentioned this issue Feb 25, 2023

Documentation for distributed custom elements in README #1039

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Integrate V5 in angular #769

Integrate V5 in angular #769

anthowm commented Feb 9, 2020

bleuscyther commented Feb 9, 2020

anthowm commented Feb 10, 2020

andreas-aeschlimann commented Feb 12, 2020

andreas-aeschlimann commented Feb 19, 2020

surmon-china commented Feb 19, 2020 •

edited

streamliner18 commented Mar 8, 2020

codevladimir commented Apr 29, 2020

andreas-aeschlimann commented Apr 29, 2020

codevladimir commented May 2, 2020

przemekpobuta commented May 31, 2020

Msender commented Jul 22, 2020

Integrate V5 in angular #769

Integrate V5 in angular #769

Comments

anthowm commented Feb 9, 2020

bleuscyther commented Feb 9, 2020

anthowm commented Feb 10, 2020

andreas-aeschlimann commented Feb 12, 2020

andreas-aeschlimann commented Feb 19, 2020

surmon-china commented Feb 19, 2020 • edited

streamliner18 commented Mar 8, 2020

codevladimir commented Apr 29, 2020

andreas-aeschlimann commented Apr 29, 2020

codevladimir commented May 2, 2020

przemekpobuta commented May 31, 2020

Msender commented Jul 22, 2020

surmon-china commented Feb 19, 2020 •

edited