TypeScript warning Ng2Dropdown name not found

[sp-andres-gutierrez]

What?

Hi, we installed this module on my project and we're getting this error on our Webpack 2 build:

[at-loader] node_modules/ng2-tag-input/dist/modules/components/dropdown/tag-input-dropdown.component.d.ts:12:15 
    Cannot find name 'Ng2Dropdown'.

I checked that ng2-material-dropdown is in our node_modules.

Do you know what we're doing wrong? Thanks for your time

[troelssiggaard]

I'm getting the same error, or similar with a Angular Cli project (updated to latest Angular 2.4.2): When I run my SPA I get: ERROR in Ng2DropdownModule is not an NgModule

I can see that it depends on the v6.0.0 and not v6.0.2 drop-down module, does this have anything to do with it?

[Gbuomprisco]

Hi @sp-andres-gutierrez,

I've never tested with Webpack 2, so I'll need to try and get back to you. Looks like a typings issue.

@troelssiggaard no, probably not, the changes were minimal. Do you also use Webpack 2?

[troelssiggaard]

I'm not sure which version of Webpack, but yes I use the Angular Cli Webpack version (latest)... The module seems to be working fine, or at least so it seems - so it could be a typings issue.

[Gbuomprisco]

Hey guys,

can you try the version 0.7.4? Thanks

[sp-andres-gutierrez]

Looks fixed 👏 👏 👏 Thanks

[Gbuomprisco]

Cool! I'll wait to see if it works for @troelssiggaard and close if so

[sp-andres-gutierrez]

Hi, I still can see this after upgrade version and remove node_modules:

In my webpack 2 build.

[troelssiggaard]

I'm still having "TagInputModule is not an NgModule". The only thing I've done is generate a Angular 2 scaffold with the newest Angular CLI, then added some components, updated Angular version to 2.4.2, installed ng2-tag-input via NPM (updated it to 0.7.4) and put TagInputModule into my @NgModule, like this:

app.module.ts: `import { TagInputModule } from 'ng2-tag-input';

@NgModule({ imports: [ TagInputModule ] ... `

As said before, it still works even with the "not an NgModule" error.

[Gbuomprisco]

Ok questions:

• what TS version are you running?
• Are you experiencing this in the AOT bundle?

[troelssiggaard]

My devDependency is "typescript": "~2.0.3".

Not sure about the AOT question, but it might be where the problem lies, again, it might be a problem with angular cli / web pack.

I've attached the error from bash (and it's also shown in the Developer Console in the browser):

[Gbuomprisco]

I'd try updating to Typescript 2.1.4, It's what I used when I tested (was working well with Webpack 2 too). It's an amazing release anyway :)

[troelssiggaard]

Still not working, as before I'm getting this in my Chrome Developer Console:

[WDS] Errors while compiling. TagInputModule is not an NgModule errors @ client?93b6:80 sock.onmessage @ socket.js:37 EventTarget.dispatchEvent @ eventtarget.js:51 (anonymous) @ main.js:274 SockJS._transportMessage @ main.js:272 EventEmitter.emit @ emitter.js:50 WebSocketTransport.ws.onmessage @ websocket.js:35 wrapFn @ zone.js:889 ZoneDelegate.invokeTask @ zone.js:275 Zone.runTask @ zone.js:151 ZoneTask.invoke @ zone.js:345

[Gbuomprisco]

Wonder if it's related to http://stackoverflow.com/questions/41420619/error-appmodule-is-not-an-ngmodule

I can see a bunch of similar issues online, might be due to angular-cli

[troelssiggaard]

It does seem to go away when I downgrade to Angular CLI 1.0.0.beta.21, but other errors appear (not in relation to ng2-tag-input), but it could "hide" the error... For all I know, this is the only version I've seen working, all beta.22 and greater show the "not an NgModule" error...

[Gbuomprisco]

I'll dig a bit in the angular threads and see how to prevent that :)

[sp-andres-gutierrez]

[anrepppp]

@Gbuomprisco ERROR in TagInputModule is not an NgModule
webpack: bundle is now VALID.

Getting same error today. I have updated all my packages and seeing the above error.

"@angular/common": "2.4.3", "@angular/compiler": "2.4.3", "@angular/core": "2.4.3", "@angular/forms": "2.4.3", "@angular/http": "2.4.3", "@angular/platform-browser": "2.4.3", "@angular/platform-browser-dynamic": "2.4.3", "@angular/router": "3.4.3", "ng2-tag-input": "^0.7.4",

 "angular-cli": "1.0.0-beta.25.5",
"tslint": "4.3.1",
"typescript": "2.1.5",
"typings": "2.1.0"

please let me know if you need any additional info about versions to debug the issue. Our project is heavily relied on ng2-tagInput and we updated to angular2.4.3 today because it depends on latest version of the angular. The work got blocked as this is the only error i am seeing and my application stops running.

[anrepppp]

https://github.com/angular/angular-cli/issues/4099#issuecomment-273608848

[beeman]

@Gbuomprisco this guide might come in handy to get a good working module: https://medium.com/@cyrilletuzi/how-to-build-and-publish-an-angular-module-7ad19c0b4464#.9y88ipdk7 :)

[Gbuomprisco]

Hey @beeman,

Thanks for the link, I read it some days ago. I will have a look at something must have changed as everything was working fine in some earlier release.

Hi @anvesh thanks for taking the time to investigate, I will have a look but probably I won't be able to do it earlier than tomorrow.

[beeman]

@Gbuomprisco yep, something changed. I had the same issue and one of the maintainers of angular-cli pointed me to this page.

FWIW, I worked on a generator based on this guide that does lot of the heavy lifting: https://github.com/beeman/generator-ngx-module

[Gbuomprisco]

@anvesh48 I have looked at the issue but still doesn't seem to disappear. I am sure though that the application should still keep working (you probably set noEmitOnError=true?) and therefore should not keep you blocked while I find a fix. I did what the article says but no luck, with the only difference I distribute with Webpack rather than Rollup.

[thisisgit]

I'm having ERROR in Ng2DropdownModule is not an NgModule error after I upgraded angular-cli from beta.24 to beta.25-5, which is the latest version. I'm not sure if error is the caused by the update in angular-cli or ng2-tag-input. I have to investigate more but anyway, I was using 0.7.0 version of ng2-tag-input and have updated to 0.7.3.

While checking dependency of Ng2DropdownModule from ng2-tag-input, I found this issue:

and could not find dist folder in the same folder:

I'm not sure if this caused that error but it somehow looks strange for me.

[thisisgit]

Just saw the comment and post saying about the solution of updating it to 0.7.4. After I did, now it says ERROR in TagInputModule is not an NgModule. And found some red underlines in:

[anrepppp]

@thisisgit Is your application still running?

[thisisgit]

@anvesh48

Nope, it crashes when it tries to lazy load the module that contains ng2-tag-input. But again, I just checked on version 0.7.0, then it works fine.

FYI, 0.7.0 uses ng2-material-dropdown@0.5.8 and 0.7.4 uses ng2-material-dropdown@0.6.2.

[Gbuomprisco]

Interesting, I'll check out what changed then (even though loads of other modules are having the exact issue)

[manhlinhnguyen]

Hi! I'm also having problem with Cannot find name 'Ng2Dropdown'. in my Ionic 2 Project. The module ng2-material-dropdown has been installed, so I don't know what can cause the problem.

[Gbuomprisco]

Hi @manhlinhnguyen, can you try installing version 0.7.4? Should fix that, but not the issue with the latest angular-cli which I am still stuck on

[manhlinhnguyen]

Hello, thank you for your answer. I had new problem since updating to 0.7.4 Can't bind to 'autocompleteItems' since it isn't a known property of 'tag-input'

I also used this module in another project (in plain Angular 2) and it works well, but now I can not make it work with my Ionic 2 Project.

[Gbuomprisco]

autocompleteItems is part of the tag-input-dropdown component, which is its child (of tag-input). You are using an outdated API - check out the examples, they are updated :)

[jsfrocha]

@Gbuomprisco , I see this one is still open, I'll keep on going here.

Have you seen https://github.com/vmware/clarity/issues/220 ?

It seems to be about the same thing, I've tried replicating it on your repo, but I'm not sure about how the build steps work, and I guess it would be more efficient if you could take a quick look whenever you get the time.

According to hansl, Angular-CLI lead dev:

Hi @adityarb88. I'm the lead on the Angular-CLI project.

Basically this error likely happens because you did not publish metadata.json files to npm. These files contain static information for your module and components.

To generate these files, follow these steps: https://angular.io/docs/ts/latest/cookbook/aot-compiler.html (basically running ngc instead of tsc to build your project). You don't have to release the .ngfactory.ts files (you can use skipTemplateCodegen: true), just the metadata json files.

Apparently, you'd just need to publish the result metadata.json files from the module/components resulting from ngc to npm with the rest of the package

[Gbuomprisco]

@Hey @jsfrocha,

thanks for pointing me to that thread!

I just published a new version which includes the .metadata.json files into the dist folder. I tried with angular-cli 1.0.0-beta.26 and that errors has disappeared. Can you try as well? I haven't tried to compile with aot yet

[jsfrocha]

@Gbuomprisco,

Yep, can confirm it is fixed on Angular CLI 1.0.0-beta.26. That should squash a couple of bug issues on the repo, at least from what I'm seeing thats open.

If you are talking about AoT compile in Angular CLI, from what I read, it now does it by default on both ng serve and ng build now, so I guess it is now working :)

Great job, and thanks for the great plugin, keep up the good work :)

[Gbuomprisco]

Closing this issue then :) Thanks @jsfrocha and everyone else for the contribution :)

[anilagrawal038]

Update module declaration file ng-input.module.d.ts as below

import { Options } from './core'; import { NgModule } from '@angular/core'; @NgModule() export declare class TagInputModule { static withDefaults(options: Options): void; }