pierreavn / angular-tabler-icons Goto Github PK

Thank you for allowing us to use your wonderful module.
I would like to know if there is a way to prevent the following message from being output when one of the icons is not loading properly.

Tabler Icon not found: Refer to documentation on https://github.com/pierreavn/angular-tabler-icons

If not, would you please consider adding a feature?

Any chance of supporting Angular 13?

Hi, I'd like to use TablerIconsModule.pick i multiple lazy modules. But I noticed that in version 1.68.1 param multiple: true is no longer preset in OptionsProvider object. I wonder why and whether it is possible to restore it.

Hi,

I'm trying to use the package in an Angular 14 project.

We get following error message while trying to install the package:

npm ERR! While resolving: [email protected]
npm ERR! Found: @angular/[email protected]
npm ERR! node_modules/@angular/common
npm ERR!   @angular/common@"^14.0.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@"11 - 13" from [email protected]
npm ERR! node_modules/angular-tabler-icons
npm ERR!   angular-tabler-icons@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/jonasgerits/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/jonasgerits/.npm/_logs/2022-06-29T12_09_56_303Z-debug-0.log

Is it possible to upgrade the package?

Thanks in advance!
Kind regards,
Jonas

This is how I import the icons:

• First I pick the icons I need.

tabler-icons.constant.ts

import { IconBrandLinkedin, IconBrandGithub, IconBrandX } from 'angular-tabler-icons/icons';
import { OptionIcons } from 'angular-tabler-icons/lib/options.interfaces';

export const TABLER_ICONS: OptionIcons = {
  IconBrandLinkedin,
  IconBrandGithub,
  IconBrandX
}

• Then I import them in the Icons module.

icons.module.ts

import { NgModule } from '@angular/core';
import { TablerIconsModule } from 'angular-tabler-icons';
import { TABLER_ICONS } from '../constants/tabler-icons.constant';

@NgModule({
  imports: [
    TablerIconsModule.pick(TABLER_ICONS)
  ],
  exports: [
    TablerIconsModule
  ]
})
export class IconsModule { }

• By last, I import the Icons module into my standalone app configuration.

app.config.ts

import { ApplicationConfig, importProvidersFrom } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { provideClientHydration } from '@angular/platform-browser';

import { IconsModule } from './modules/icons.module';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes), 
    provideClientHydration(),
    importProvidersFrom(IconsModule),
  ]
};

Based on the previous, once the app is started, the following error appeared:

NG0203: inject() must be called from an injection context such as a constructor, a factory function, a field initializer, or a function used with `runInInjectionContext`. Find more at https://angular.io/errors/NG0203

Versions to reproduce:

• Ubuntu WSL

Distributor ID: Ubuntu
Description:    Ubuntu 22.04.3 LTS
Release:        22.04
Codename:       jammy

• bun 1.0.7
• Angular 17.0.0 (standalone - SSR)

error when npm install,

I have install the package but when i create module i got this error, and also i tried the feather icons library for angular and that is working fine so errors at all.

Hi.

Thanks for the great package.

[Q] Do you plan to support this in Angular v15?

Hi, I'd like to provide some icons for each components, and it working with components within module, but not working in standalone component, because TablerIconsModule.pick method returns ModuleWithProviders<TablerIconsModule> and its not suited to imports in standalone components.
Solution is to create provider with pick method, and move picking from imports to providers.
I tested it in local version, but I prefer to use npm package, so I have a PR
I upgraded angular to 14 to create sample standalone component