loke/ng2-fittext
1
0
Fork 0
Code Issues 2 Pull requests 2 Projects Releases 3 Packages Wiki Activity Actions

Can't bind to 'fittext' since it isn't a known property of 'p' - I have properly installed ng2-fittext #109

New issue
Closed
opened 2024-07-31 11:46:17 +00:00 by SofieBuur · 4 comments
SofieBuur commented 2024-07-31 11:46:17 +00:00 (Migrated from github.com)
Copy link

Hi,

I am using Angular 18, and I am trying to use ng2-fittext for a small component below.

<div>
    <p
      [fittext]="true"
      [activateOnResize]="true"
      class="trend-stat-container-number"
    >
      {{ keyData }} <span class="unit"> {{ unit }}</span>
    </p>
  </div>

I have properly installed ng2-fittext, and imported it in my app.module.

package.json = "ng2-fittext": "^2.0.0",
app.module = import { Ng2FittextModule } from "ng2-fittext"; ... imports: [Ng2FittextModule]

Despite this, I still get the error "Can't bind to 'fittext' since it isn't a known property of 'p'." when trying to use the directives.

Can anyone help me?

Thank you in advance!

Hi, I am using Angular 18, and I am trying to use ng2-fittext for a small component below. ``` <div> <p [fittext]="true" [activateOnResize]="true" class="trend-stat-container-number" > {{ keyData }} <span class="unit"> {{ unit }}</span> </p> </div> ``` I have properly installed ng2-fittext, and imported it in my app.module. package.json = "ng2-fittext": "^2.0.0", app.module = import { Ng2FittextModule } from "ng2-fittext"; ... imports: [Ng2FittextModule] Despite this, I still get the error "Can't bind to 'fittext' since it isn't a known property of 'p'." when trying to use the directives. Can anyone help me? Thank you in advance!
thisloke commented 2024-07-31 17:03:13 +00:00 (Migrated from github.com)
Copy link

Probably is a misconfiguration in your project or a missing import somewhere, but in order to understand better your problem i need to replicate it in a sandbox.

Can you please share a stackblitz or a repository with the issue?

Thanks

Probably is a misconfiguration in your project or a missing import somewhere, but in order to understand better your problem i need to replicate it in a sandbox. Can you please share a stackblitz or a repository with the issue? Thanks
SofieBuur commented 2024-07-31 18:18:28 +00:00 (Migrated from github.com)
Copy link

Thank you for the quick response!

Unfortunately, I cannot share the entire repo as it is for work. Although, I have tried installing and using fittext for another local Angular project, and it works fine, so it must have something to do with the specific configuration of the project.

Might there be other packages that causes some conflict? Below is my entire package.json and app.module.

{
  "name": "valyrion-merchant-dashboard",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^18.0.1",
    "@angular/common": "^18.0.1",
    "@angular/compiler": "^18.0.1",
    "@angular/core": "^18.0.1",
    "@angular/forms": "^18.0.1",
    "@angular/platform-browser": "^18.0.1",
    "@angular/platform-browser-dynamic": "^18.0.1",
    "@angular/router": "^18.0.1",
    "@fortawesome/fontawesome-free": "^6.5.2",
    "@ngx-translate/core": "^15.0.0",
    "@ngx-translate/http-loader": "^8.0.0",
    "@videogular/ngx-videogular": "^8.0.0",
    "@zxcvbn-ts/core": "^3.0.4",
    "chart.js": "^4.4.3",
    "date-fns": "^3.6.0",
    "flowbite": "^2.3.0",
    "ng2-fittext": "^2.0.0",
    "ngx-skeleton-loader": "^9.0.0",
    "ngx-toastr": "^19.0.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.6.3",
    "valyrion-merchant-dashboard": "file:",
    "xlsx": "^0.18.5",
    "zone.js": "~0.14.6"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^18.0.2",
    "@angular/cli": "^18.0.2",
    "@angular/compiler-cli": "^18.0.1",
    "@types/core-js": "^2.5.8",
    "@types/jasmine": "~4.3.0",
    "jasmine-core": "~4.6.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "tailwindcss": "^3.4.4",
    "typescript": "~5.4.5"
  }
}


// Core
import { LOCALE_ID, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DatePipe, registerLocaleData } from '@angular/common';
import localeDa from '@angular/common/locales/da';
import { HttpClientModule, HttpClient, HTTP_INTERCEPTORS } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { ToastrModule } from 'ngx-toastr';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
import { Ng2FittextModule } from "ng2-fittext";

// Authentication
import { AuthInterceptor } from './core/interceptors/auth.interceptor';
import { AuthGuard } from './core/guards/auth.guard';
import { AuthService } from './core/authentication/auth.service';
import { TokenService } from './core/authentication/token.service';

// Util pages
import { LoginComponent } from './features/utility/login/login.component';
import { ForgotPasswordComponent } from './features/utility/forgot-password/forgot-password.component';
import { ResetPasswordComponent } from './features/utility/reset-password/reset-password.component';
import { ChooseMerchantComponent } from './features/utility/choose-merchant/choose-merchant.component';

// Pages
import { OverviewComponent } from './features/pages/overview/overview.component';
import { AnalyticsComponent } from './features/pages/analytics/analytics.component';
import { ViaadsPerformanceComponent } from './features/pages/viaads-performance/viaads-performance.component';
import { TeamComponent } from './features/pages/team/team.component';
import { SupportCenterComponent } from './features/pages/support-center/support-center.component';


// Onboarding
import { OnboardingComponent } from './features/pages/onboarding/onboarding.component';
import { WooCommerceComponent } from './features/pages/onboarding/woo-commerce/woo-commerce.component';
import { ShopifyComponent } from './features/pages/onboarding/shopify/shopify.component';
import { DanDomainComponent } from './features/pages/onboarding/dan-domain/dan-domain.component';
import { DanDomainClassicComponent } from './features/pages/onboarding/dan-domain-classic/dan-domain-classic.component';

import { SharedModule } from './shared/shared.module';

// Translation
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

// Video player
import { VgCoreModule } from '@videogular/ngx-videogular/core';
import { VgControlsModule } from '@videogular/ngx-videogular/controls';
import { VgOverlayPlayModule } from '@videogular/ngx-videogular/overlay-play';
import { VgBufferingModule } from '@videogular/ngx-videogular/buffering';


registerLocaleData(localeDa);

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    OverviewComponent,
    ForgotPasswordComponent,
    ResetPasswordComponent,
    TeamComponent,
    AnalyticsComponent,
    ViaadsPerformanceComponent,
    SupportCenterComponent,
    ChooseMerchantComponent,
    OnboardingComponent,
    WooCommerceComponent,
    ShopifyComponent,
    DanDomainComponent,
    DanDomainClassicComponent
  ],
  imports: [
    Ng2FittextModule,
    VgCoreModule,
    VgControlsModule,
    VgOverlayPlayModule,
    VgBufferingModule,
    BrowserModule,
    ReactiveFormsModule,
    RouterModule,
    AppRoutingModule,
    FormsModule,
    HttpClientModule,
    SharedModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: httpTranslateLoader,
        deps: [HttpClient]
      }
    }),
    ToastrModule.forRoot({
      timeOut: 20000,
      positionClass: 'toast-bottom-right',
      closeButton: true,
      progressBar: true,
      enableHtml: true
    }),
    BrowserAnimationsModule,
    NgxSkeletonLoaderModule.forRoot()
  ],
  exports: [
    TranslateModule
  ],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
    AuthService,
    TokenService,
    { provide: LOCALE_ID, useValue: 'da-DK' },
    DatePipe
  ],
  bootstrap: [AppComponent]
})

export class AppModule { }

export function httpTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http);
}
Thank you for the quick response! Unfortunately, I cannot share the entire repo as it is for work. Although, I have tried installing and using fittext for another local Angular project, and it works fine, so it must have something to do with the specific configuration of the project. Might there be other packages that causes some conflict? Below is my entire package.json and app.module. ``` { "name": "valyrion-merchant-dashboard", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "watch": "ng build --watch --configuration development", "test": "ng test" }, "private": true, "dependencies": { "@angular/animations": "^18.0.1", "@angular/common": "^18.0.1", "@angular/compiler": "^18.0.1", "@angular/core": "^18.0.1", "@angular/forms": "^18.0.1", "@angular/platform-browser": "^18.0.1", "@angular/platform-browser-dynamic": "^18.0.1", "@angular/router": "^18.0.1", "@fortawesome/fontawesome-free": "^6.5.2", "@ngx-translate/core": "^15.0.0", "@ngx-translate/http-loader": "^8.0.0", "@videogular/ngx-videogular": "^8.0.0", "@zxcvbn-ts/core": "^3.0.4", "chart.js": "^4.4.3", "date-fns": "^3.6.0", "flowbite": "^2.3.0", "ng2-fittext": "^2.0.0", "ngx-skeleton-loader": "^9.0.0", "ngx-toastr": "^19.0.0", "rxjs": "~7.8.0", "tslib": "^2.6.3", "valyrion-merchant-dashboard": "file:", "xlsx": "^0.18.5", "zone.js": "~0.14.6" }, "devDependencies": { "@angular-devkit/build-angular": "^18.0.2", "@angular/cli": "^18.0.2", "@angular/compiler-cli": "^18.0.1", "@types/core-js": "^2.5.8", "@types/jasmine": "~4.3.0", "jasmine-core": "~4.6.0", "karma": "~6.4.0", "karma-chrome-launcher": "~3.2.0", "karma-coverage": "~2.2.0", "karma-jasmine": "~5.1.0", "karma-jasmine-html-reporter": "~2.1.0", "tailwindcss": "^3.4.4", "typescript": "~5.4.5" } } ``` ``` // Core import { LOCALE_ID, NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { DatePipe, registerLocaleData } from '@angular/common'; import localeDa from '@angular/common/locales/da'; import { HttpClientModule, HttpClient, HTTP_INTERCEPTORS } from '@angular/common/http'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { AppRoutingModule } from './app-routing.module'; import { RouterModule } from '@angular/router'; import { AppComponent } from './app.component'; import { ToastrModule } from 'ngx-toastr'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader'; import { Ng2FittextModule } from "ng2-fittext"; // Authentication import { AuthInterceptor } from './core/interceptors/auth.interceptor'; import { AuthGuard } from './core/guards/auth.guard'; import { AuthService } from './core/authentication/auth.service'; import { TokenService } from './core/authentication/token.service'; // Util pages import { LoginComponent } from './features/utility/login/login.component'; import { ForgotPasswordComponent } from './features/utility/forgot-password/forgot-password.component'; import { ResetPasswordComponent } from './features/utility/reset-password/reset-password.component'; import { ChooseMerchantComponent } from './features/utility/choose-merchant/choose-merchant.component'; // Pages import { OverviewComponent } from './features/pages/overview/overview.component'; import { AnalyticsComponent } from './features/pages/analytics/analytics.component'; import { ViaadsPerformanceComponent } from './features/pages/viaads-performance/viaads-performance.component'; import { TeamComponent } from './features/pages/team/team.component'; import { SupportCenterComponent } from './features/pages/support-center/support-center.component'; // Onboarding import { OnboardingComponent } from './features/pages/onboarding/onboarding.component'; import { WooCommerceComponent } from './features/pages/onboarding/woo-commerce/woo-commerce.component'; import { ShopifyComponent } from './features/pages/onboarding/shopify/shopify.component'; import { DanDomainComponent } from './features/pages/onboarding/dan-domain/dan-domain.component'; import { DanDomainClassicComponent } from './features/pages/onboarding/dan-domain-classic/dan-domain-classic.component'; import { SharedModule } from './shared/shared.module'; // Translation import { TranslateLoader, TranslateModule } from '@ngx-translate/core'; import { TranslateHttpLoader } from '@ngx-translate/http-loader'; // Video player import { VgCoreModule } from '@videogular/ngx-videogular/core'; import { VgControlsModule } from '@videogular/ngx-videogular/controls'; import { VgOverlayPlayModule } from '@videogular/ngx-videogular/overlay-play'; import { VgBufferingModule } from '@videogular/ngx-videogular/buffering'; registerLocaleData(localeDa); @NgModule({ declarations: [ AppComponent, LoginComponent, OverviewComponent, ForgotPasswordComponent, ResetPasswordComponent, TeamComponent, AnalyticsComponent, ViaadsPerformanceComponent, SupportCenterComponent, ChooseMerchantComponent, OnboardingComponent, WooCommerceComponent, ShopifyComponent, DanDomainComponent, DanDomainClassicComponent ], imports: [ Ng2FittextModule, VgCoreModule, VgControlsModule, VgOverlayPlayModule, VgBufferingModule, BrowserModule, ReactiveFormsModule, RouterModule, AppRoutingModule, FormsModule, HttpClientModule, SharedModule, TranslateModule.forRoot({ loader: { provide: TranslateLoader, useFactory: httpTranslateLoader, deps: [HttpClient] } }), ToastrModule.forRoot({ timeOut: 20000, positionClass: 'toast-bottom-right', closeButton: true, progressBar: true, enableHtml: true }), BrowserAnimationsModule, NgxSkeletonLoaderModule.forRoot() ], exports: [ TranslateModule ], providers: [ { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }, AuthService, TokenService, { provide: LOCALE_ID, useValue: 'da-DK' }, DatePipe ], bootstrap: [AppComponent] }) export class AppModule { } export function httpTranslateLoader(http: HttpClient) { return new TranslateHttpLoader(http); } ```
SofieBuur commented 2024-08-05 10:34:21 +00:00 (Migrated from github.com)
Copy link

I figured it out - a silly mistake on my behalf.

I tried to use the directive in a component belonging in a shared module, and forgot to also put the import in the shared module.
Classic.

I apologize for the confusion and appreciate the reponse 🙏🏻

I figured it out - a silly mistake on my behalf. I tried to use the directive in a component belonging in a shared module, and forgot to also put the import in the shared module. Classic. I apologize for the confusion and appreciate the reponse 🙏🏻
🎉 1
thisloke commented 2024-08-05 21:52:41 +00:00 (Migrated from github.com)
Copy link

So, good news 🎉
Closing it

So, good news 🎉 Closing it
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
master
dependabot/npm_and_yarn/express-4.19.2
dependabot/npm_and_yarn/webpack-dev-middleware-5.3.4
v1.1.0
1.1.0
1.0.24
1.0.2
Labels
Clear labels   
bug

   
dependencies

Pull requests that update a dependency file

  
duplicate

   
enhancement

   
help wanted

   
invalid

   
investigation

Something to investigate before assigning it a proper tag

  
question

   
release

[Utility label] Release

  
spike

   
wontfix
No labels
bug
dependencies
duplicate
enhancement
help wanted
invalid
investigation
question
release
spike
wontfix
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference: loke/ng2-fittext#109
No description provided.
Delete branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?