Can't bind to 'files' since it's not a known property of ....

[aeldaly]

Here's the error I'm getting:

ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'files' since it isn't a known property of 'ngfFormData'. ("
    <button *ngIf="files" (click)="uploadFiles(files)">send files</button>

    <ngfFormData [ERROR ->][files]="files" [(FormData)]="resume" postName="file"></ngfFormData>

    <ngfUploadStatus [(percent)"): ng:///ApplyModule/DetailsComponent.html@60:17
Can't bind to 'FormData' since it isn't a known property of 'ngfFormData'. ("on *ngIf="files" (click)="uploadFiles(files)">send files</button>

    <ngfFormData [files]="files" [ERROR ->][(FormData)]="resume" postName="file"></ngfFormData>

    <ngfUploadStatus [(percent)]="uploadPercent"): ng:///ApplyModule/DetailsComponent.html@60:33
'ngfFormData' is not a known element:
1. If 'ngfFormData' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
    <button *ngIf="files" (click)="uploadFiles(files)">send files</button>

    [ERROR ->]<ngfFormData [files]="files" [(FormData)]="resume" postName="file"></ngfFormData>

I've pretty much copied and pasted from the project README.

app.module.ts:

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

// import { Logger } from 'angular2-logger/core';

import { rootRouterConfig } from './app.routes';
import { AppCommonModule } from './components/common/app-common.module';
import { AppComponent } from './app.component';

import { RoutePartsService } from './services/route-parts/route-parts.service';
import { NavigationService } from './services/navigation/navigation.service';
import { AuthService } from './services/auth/auth.service';
import { AccountAPI, JobOpeningAPI } from './serverCalls';
import { ngfModule } from 'angular-file';

// AoT requires an exported function for factories
export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    AppCommonModule,
    ngfModule,
    TranslateModule.forRoot({
      loader: {
          provide: TranslateLoader,
          useFactory: HttpLoaderFactory,
          deps: [HttpClient]
      }
    }),
    RouterModule.forRoot(rootRouterConfig, { useHash: false })
  ],
  declarations: [ AppComponent ],
  providers: [
    RoutePartsService,
    NavigationService,
    AuthService,
    AccountAPI,
    JobOpeningAPI
    // Logger,
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

the component:

import { Component, OnInit } from '@angular/core';
// import { ActivatedRoute, Router } from '@angular/router';
import { HttpEvent } from '@angular/common/http';
import { MatButton } from '@angular/material';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { CustomValidators } from 'ng2-validation';
import { ngf, ngfModule } from 'angular-file';

// import { AccountAPI, JobOpeningAPI, SurveyApplyAPI } from '../../../serverCalls';
import { JobDetails, JobOpening, Survey, SurveyApply } from '../../../models';
// import { AuthService, SurveyService } from '../../../services';

@Component({
  selector: 'ngx-apply-details',
  templateUrl: './details.component.html',
  styleUrls: ['./details.component.scss']
})
export class DetailsComponent implements OnInit {
  public contactForm: FormGroup;
  public resumePostUrl: 'http://localhost:8080/api/v1/resume';
  public resume: FormData;
  public httpEvent: HttpEvent<Event>;

  private jobDetails: JobDetails;
  private jobOpening: JobOpening;

  constructor() {
    this.contactForm = new FormGroup({
      email: new FormControl('', [Validators.required, Validators.email]),
      firstName: new FormControl('', [Validators.required]),
      lastName: new FormControl('', [Validators.required]),
      phoneNumber: new FormControl('', [Validators.required, CustomValidators.phone('en-CA')])
    });
  }

  public ngOnInit(): void {
    this.jobDetails = JobDetails.initializeFromLocalStorage();
    this.jobOpening = this.jobDetails.jobOpenings[0];
  }

  public updateContactInformation(): void {
    console.log('yaaaaaaaaay');
  }
}

my html:

<mat-card>
  <mat-card-header>
    <mat-card-title>Upload New Resume &amp; Cover Letter</mat-card-title>
  </mat-card-header>
  <mat-card-content>
    <h3>Select files</h3>

    <input ngf multiple type="file" accept="image/*" [(files)]="files" maxSize="1024" />
    <button *ngIf="files" (click)="uploadFiles(files)">send files</button>

    <ngfFormData [files]="files" [(FormData)]="resume" postName="file"></ngfFormData>

    <ngfUploadStatus [(percent)]="uploadPercent" [httpEvent]="httpEvent"></ngfUploadStatus>

    <div *ngIf="uploadPercent">
      Upload Progress: {{ uploadPercent }}%
    </div>

  </mat-card-content>
</mat-card>

[AckerApple]

You don’t ever seem to import the component DetailsComponent into your model?

The code you are having an issue is confirmed working on the example page

Example Code: https://github.com/AckerApple/angular-file/blob/development/demo/src/app/components/file-upload/simple-demo.html#L20

[AckerApple]

*module

(I’m on phone)

[aeldaly]

I import it in another module. Here's what I have:

app.routes.ts

import { Routes } from '@angular/router';

import { AdminLayoutComponent } from './components/common/layouts/admin-layout/admin-layout.component';
import { AuthLayoutComponent } from './components/common/layouts/auth-layout/auth-layout.component';

import { AuthService } from './services/auth/auth.service';

export const rootRouterConfig: Routes = [
  {
    path: '',
    redirectTo: '/sessions/signin',
    pathMatch: 'full'
  },
  {
    path: '',
    component: AuthLayoutComponent,
    children: [
      {
        path: 'sessions',
        loadChildren: './views/sessions/sessions.module#SessionsModule'
      }
    ]
  },
  {
    path: '',
    component: AdminLayoutComponent,
    canActivate: [AuthService],
    children: [
      {
        path: 'dashboard',
        loadChildren: './views/dashboard/dashboard.module#DashboardModule',
        data: { title: 'Top 5 Traits' }
      }
    ]
  },
  {
    path: '',
    component: AdminLayoutComponent,
    children: [
      {
        path: '',
        loadChildren: './views/survey/survey.module#SurveyModule'
      }
    ]
  },
  {
    path: '',
    component: AdminLayoutComponent,
    children: [
      {
        path: '',
        loadChildren: './views/apply/apply.module#ApplyModule'
      }
    ]
  },
  // {
  //   path: '**',
  //   redirectTo: 'sessions/404'
  // }
];

apply.module.ts:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { TranslateModule } from '@ngx-translate/core';
import { FlexLayoutModule } from '@angular/flex-layout';

import { ReactiveFormsModule } from '@angular/forms';

import {
  MatButtonModule,
  MatCardModule,
  MatCheckboxModule,
  MatFormFieldModule,
  MatIconModule,
  MatInputModule,
  MatProgressBarModule
 } from '@angular/material';

import { CommonDirectivesModule } from '../../directives/common/common-directives.module';

import { applyRoutes } from './apply.routing';
import { SignupComponent } from './signup/signup.component';
import { DetailsComponent } from './details/details.component';
import { SurveyAPI, SurveyApplyAPI } from '../../serverCalls';
import { SurveyService } from '../../services';

@NgModule({
  imports: [
    CommonModule,
    TranslateModule,
    ReactiveFormsModule,
    FlexLayoutModule,
    MatButtonModule,
    MatCardModule,
    MatCheckboxModule,
    MatFormFieldModule,
    MatIconModule,
    MatInputModule,
    MatProgressBarModule,
    RouterModule.forChild(applyRoutes)
  ],
  declarations: [
    SignupComponent,
    DetailsComponent
  ],
  providers: [
    SurveyApplyAPI,
    SurveyAPI,
    SurveyService
  ]
})
export class ApplyModule { }

here's my package.json

{
    "name": "clearfit-frontend",
    "version": "0.0.1",
    "license": "MIT",
    "scripts": {
        "ng": "ng",
        "start": "ng serve --proxy-config proxy.conf.js --hmr",
        "build": "ng build",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e"
    },
    "private": true,
    "dependencies": {
        "@agm/core": "1.0.0-beta.2",
        "@angular/animations": "5.0.0",
        "@angular/cdk": "^5.0.0-rc0",
        "@angular/common": "5.0.0",
        "@angular/compiler": "5.0.0",
        "@angular/core": "5.0.0",
        "@angular/flex-layout": "^2.0.0-beta.10-4905443",
        "@angular/forms": "5.0.0",
        "@angular/http": "5.0.0",
        "@angular/material": "^5.0.0-rc0",
        "@angular/platform-browser": "5.0.0",
        "@angular/platform-browser-dynamic": "5.0.0",
        "@angular/router": "5.0.0",
        "@ngx-translate/core": "^8.0.0",
        "@ngx-translate/http-loader": "^2.0.0",
        "@swimlane/ngx-charts": "6.1.0",
        "@swimlane/ngx-datatable": "11.0.0",
        "angular-calendar": "0.21.3",
        "angular-file": "^0.3.8",
        "angular2-logger": "^0.6.0",
        "chart.js": "2.5.0",
        "classlist.js": "1.1.20150312",
        "core-js": "2.4.1",
        "d3": "4.10.0",
        "date-fns": "1.28.5",
        "hammerjs": "2.0.8",
        "hopscotch": "0.3.1",
        "ng2-charts": "1.6.0",
        "ng2-dragula": "1.3.1",
        "ng2-validation": "4.2.0",
        "ngx-quill": "2.0.4",
        "node-sass": "^4.7.1",
        "perfect-scrollbar": "0.7.1",
        "rxjs": "5.5.2",
        "url-parse": "^1.2.0",
        "zone.js": "0.8.18"
    },
    "devDependencies": {
        "@angular/cli": "1.5.0",
        "@angular/compiler-cli": "5.0.0",
        "@angularclass/hmr": "^2.1.3",
        "@types/hopscotch": "0.2.28",
        "@types/jasmine": "2.5.38",
        "@types/node": "6.0.60",
        "angular-tslint-rules": "^1.0.4",
        "codelyzer": "~2.0.0",
        "enhanced-resolve": "3.3.0",
        "jasmine-core": "~2.5.2",
        "jasmine-spec-reporter": "~3.2.0",
        "karma": "~1.4.1",
        "karma-chrome-launcher": "~2.1.1",
        "karma-cli": "~1.0.1",
        "karma-coverage-istanbul-reporter": "~0.2.0",
        "karma-jasmine": "~1.1.0",
        "karma-jasmine-html-reporter": "~0.2.2",
        "protractor": "~5.1.0",
        "ts-node": "2.0.0",
        "tslint": "4.5.0",
        "typescript": "2.4.2"
    }
}

Please note that I'm running on Angular 5. Thanks for the link, but as you can see, I've configured it as per the documentation.

Thanks.

[AckerApple]

It could very well be that this package was built with Angular 4.x.x and that 5 straight up doesn’t work with 4 modules.

When 5 first came out, I was getting the same error as you elsewhere and I abandoned upgrading because no Angular 4 projects were working in 5

We could very well have are selves a major version change. Meaning, I will build the code with 5 but it will be considered a breaking change and I will up the major version number

I’m loaded. This might be a Friday thing. Pull request welcome.

I will report when I have more to

[AckerApple]

I’m on phone, I will adjust issue labels by removing “invalid” from this issue

[AckerApple]

It appears we are not the only ones reporting this issue.

Some answers maybe in this issue report on angular/core : https://github.com/angular/angular/issues/19607

[AckerApple]

v0.4.0 of this package is now built on Angular 5.0.5

Please test and close this issue if satisfactory. Otherwise I will close this issue after inactivity

[alignsoft]

Am I to understand then that v0.4.0 isn't compatible with Angular v4.x.x projects, and should only be used with v5.x.x?

If that's the case then, is v0.3.8 the last Angular v4 version of the library?

[AckerApple]

Yes, @alignsoft you are absolutely 100% accurate.

I should note this in the readme but this whole Angular breaking versions crap pisses me off real good and I'm more flustered than focused about it.

This is nothing like how Angular2 kept breaking BUT I seriously we see an end to this incompatible versions

[AckerApple]

I've confirmed we are all set working on Angular5 . Using in production build. Closing this issue. Reopen if needed

[aeldaly]

Thanks @AckerApple

[AckerApple]

Hey you are so very welcome.

Please like, subscribe, star or whatever might cause my packages to receive more acceptance by popular usage.