No Directive annotation found on NgFileSelect

[SergeyMell]

Actually, after adding a package to my project, I get an error:

No Directive annotation found on NgFileSelect

which appears in browser console and project does'n work.

[jkuri]

Did you add UPLOAD_DIRECTIVES to your components directive array?

[SergeyMell]

Yes, sure

[jkuri]

Actually don't know about that error, try googling or see the demo.

[AndrewLosikhin]

Same problem, it appears for versions of angular >= beta8, is it possible to update version of angular?

[jkuri]

Thanks for reporting guys, I will test this and fix ASAP.

On Monday, 14 March 2016, AndrewLosikhin [email protected] wrote:

Same problem, it appears for versions of angular >= beta8

—
Reply to this email directly or view it on GitHub
#16 (comment).

[SergeyMell]

@AndrewLosikhin I have beta 6 version. Interesting remark - when I copied the package from node_packages to the project and injected it localy, I did not face the issue.

[jkuri]

Yes, that is how it should be included right now. Sorry for not documenting
this.

On Monday, 14 March 2016, SergeyMell [email protected] wrote:

@AndrewLosikhin https://github.com/AndrewLosikhin I have beta 6
version. Interesting remark - when I copied the package from node_packages
to the project and injected it localy, I did not faced the issue.

—
Reply to this email directly or view it on GitHub
#16 (comment).

[spartaksun]

The same problem on Anguar 2.0.0-rc2

[shoespray]

Same problem here Angular 2.0.0-rc2. Any fix?

[jkuri]

This should be resolved with the 0.5.7.

[aroget]

Im getting this same error on RC4

[jkuri]

This could be an issue with not having the same versions for this module and your (RC4) version of an app. I currently use angular nightly builds for this component and I will update to RC5 when released.

[kevinvella]

Hi jkuri,

I am experiencing this problem. I am at lost.

I am using the RC4 version. Building with webpack for angular 2 universal.
On the client it is dropping this error:
Error: Uncaught (in promise): No Directive annotation found on NgFileSelect

I am suspecting the error is generated because of how webpack is bundling things. Is it possible?

The following link is the webpack.config file:
https://dl.dropboxusercontent.com/u/63904414/webpack.config.js

Is there any other possible cause for this error?

Thanks
Regards
Kevin Vella

[kevinvella]

Hi,

I've solved the issue by copying the module to the project, added index.ts for every ts file, and in it i declared an export * statement.

This solved the issue of the No Directive annotation found on NgFileSelect, when running the app.

I suspect that before, it was not including the files in the bundle correctly.
If you have another solution, can you please suggest it :)

Thanks
Regards
Kevin Vella

[jkuri]

Hi Kevin, can you submit a PR with index.ts and exported * for the component, I will merge it.

[DavideViolante]

Hope you fix it soon, same error on RC4. That's a nice project.
Some other things I noticed on package.json:

• change angular 2 version to match the current version (rc4)
• remove es6-shim and es6-promise and add core-js instead (look angular2 quickstart package.json).

[kevinvella]

HI,

Created a pull request to integrate the index.ts for the necessary files.

[lacroixdavid1]

I am still getting this error. Is there anything wrong i'm doing or someone else is still getting this error?

[jkuri]

How do you import module into your app? can you share you code sample?

[codeursenior]

Hi, I have the same error.

I try to setup "Basic exemple of upload with ng2-uploader" from the documentation.

I import the directives :
import {UPLOAD_DIRECTIVES} from 'ng2-uploader/ng2-uploader';

and i add it into my component as a directive:
directives: [UPLOAD_DIRECTIVES]

I use System JS with this config:

var map = {
    'app':                        'dist', // 'app',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs',
    ...
    'ng2-uploader':               'node_modules/ng2-uploader'
  };

var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
    ...
    'ng2-uploader':               { defaultExtension: 'js' }
  };

And my error is : Template parse errors:
Can't bind to 'ng-file-select' since it isn't a known native property

Anybody has an idea about what is the problem ?

[lacroixdavid1]

i am importing the module this way.

import {UPLOAD_DIRECTIVES} from 'ng2-uploader';
import {PROGRESSBAR_DIRECTIVES, BS_VIEW_PROVIDERS } from 'ng2-bootstrap/ng2-bootstrap';

I'm also declaring directives.
directives: [PROGRESSBAR_DIRECTIVES, UPLOAD_DIRECTIVES]

[jkuri]

@lacroixdavid1 please check #55 (comment) where I posted example with SystemJS configuration.

[codeursenior]

Hi, thank you for the help, but I'm going crazy.

My application still does not recognize the Directive, while the example code works fine.
Here's what I've done now:

system.config.js

var map = {
   ...
    'ng2-uploader':               'node_modules/ng2-uploader',
  };

  var packages = {
     ...
    'ng2-uploader':               { main: 'ng2-uploader.js', defaultExtension: 'js' },
  };

my component

import { UPLOAD_DIRECTIVES } from 'ng2-uploader';

directives: [UPLOAD_DIRECTIVES]

It still does not work. The error is in my opinion a compilation problem. Let me explain:

Code exemple of ng2-uploader.js (into node_modules/ng2-uploader)

"use strict";
function __export(m) {
    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
}
var ng2_uploader_1 = require('./src/services/ng2-uploader');
var ng_file_select_1 = require('./src/directives/ng-file-select');
var ng_file_drop_1 = require('./src/directives/ng-file-drop');
__export(require('./src/services/ng2-uploader'));
__export(require('./src/directives/ng-file-select'));
__export(require('./src/directives/ng-file-drop'));
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = {
    directives: [ng_file_select_1.NgFileSelect, ng_file_drop_1.NgFileDrop],
    providers: [ng2_uploader_1.Ng2Uploader]
};
exports.UPLOAD_DIRECTIVES = [ng_file_select_1.NgFileSelect, ng_file_drop_1.NgFileDrop];
//# sourceMappingURL=ng2-uploader.js.map

My app code of ng2-uploader.js (into node_modules/ng2-uploader)

import { Ng2Uploader } from './src/services/ng2-uploader';
import { NgFileSelect } from './src/directives/ng-file-select';
import { NgFileDrop } from './src/directives/ng-file-drop';
export * from './src/services/ng2-uploader';
export * from './src/directives/ng-file-select';
export * from './src/directives/ng-file-drop';
export default {
    directives: [NgFileSelect, NgFileDrop],
    providers: [Ng2Uploader]
};
export var UPLOAD_DIRECTIVES = [NgFileSelect, NgFileDrop];
//# sourceMappingURL=/Users/jan/Dev/github/ng2-uploader/ng2-uploader.js.map

It seems that typescript has not properly compiled library files. Here's my tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "outDir": "dist/"
  }
}

I do not see the problem. Anyone has had this error? thank you for any help :)

[lacroixdavid1]

it's all working in 0.5.13

[xchatter]

Still the same error - rc4