Ngx-chips: Templates not found

[CyrilleGuimezanes]

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[x] support request

Current behavior
I installed the plugin, import the module and I get in Chrome Console:

http://localhost:3000/tag-input.template.html
Failed to load tag-input.template.html
http://localhost:3000/icon.html
http://localhost:3000/tag-input-form.template.html
http://localhost:3000/tag.template.html

I can't figure out why the plugin try to get all templates at server root directory

Right now, I can't migrate to Angular 4.0.0/Webpack 2 (due to release planning contraints) so I tried to install v1.0.0. I also try the 0.8.6 to check if the problem was with webpack 2.

What do you use to build your app? (SystemJS, Webpack). Please specify the version
Webpack 1.x

• Angular version:
  2.4.10

• Browser:
  All

Can you help me with this issue?

[Gbuomprisco]

Hi @CyrilleGuimezanes,

You're not the first one to report this particular issue - it must have something to do with Webpack. I can't really reproduce - on the demo app in this repository, not with a cli app. Maybe try check the configuration in the demo app (although it uses webpack 2).

Would you post here your webpack config? that may help

[dougludlow]

@Gbuomprisco it might be related to not having a moduleId specified in the Component annotations. See http://stackoverflow.com/questions/37178192/angular2-what-is-the-meanings-of-module-id-in-component

[dougludlow]

However, that shouldn't be an issue if the bundle is being consumed, right?

[Gbuomprisco]

@dougludlow exactly - once it is bundled that shouldn't be an issue

[dougludlow]

@CyrilleGuimezanes how are you including ng2-tag-input in your project? You should ensure you are using dist/ng2-tag-input.bundle.js.

[margielm]

I have the same issue with Angular 4 and webpack 2.2.1 but on version 1.0.3. Lates version (1.0.4) is failing on compilation with:

ERROR in ./~/ng2-tag-input/dist/~/ng2-material-dropdown/index.js
Module not found: Error: Can't resolve './ng2-dropdown.bundle.js' in '/Users/margielm/workspace/ng2/confitura-page/node_modules/ng2-tag-input/dist/node_modules/ng2-material-dropdown'
 @ ./~/ng2-tag-input/dist/~/ng2-material-dropdown/index.js 2:17-52
 @ ./~/ng2-tag-input/dist/modules/ng2-tag-input.module.js
 @ ./src/app/pages/pages.module.ts
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/main.ts

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

[Gbuomprisco]

Hi @margielm,

somehow node_modules ended up in dist. I'm submitting a fixed version now

published 1.0.5 - maybe try that one? won't fix the first issue though I am afraid

[CyrilleGuimezanes]

@dougludlow I installed the plugin with npm & import it with angular/webpack1 so it should resolve the "main" entry in package.json which is "./dist/ng2-tag-input.bundle.js"

[Gbuomprisco]

@CyrilleGuimezanes maybe post here your webpack config - can't really help without

[alexandredavi]

Same issue for me

[Gbuomprisco]

@alexandredavi what's your config like?

[CyrilleGuimezanes]

@Gbuomprisco My webpack config is pasted here: https://pastebin.com/JWaq1SQH
This config was grabed from https://github.com/AngularClass/angular2-webpack-starter and can be a bit outdated (~ created 7month ago, an loooog time in webpack universe ;) )

[alexandredavi]

It's the same as here: https://github.com/AngularClass/angular2-webpack-starter

[Gbuomprisco]

I would try removing .html from resolve, but not sure it will work. I just tried the same config (latest version) and it works fine

[CyrilleGuimezanes]

I tried without .html, same issue :(

[margielm]

Hey,
what are you using as the import statement? I had the same issue as you do when I did

import {TagInputModule} from "ng2-tag-input/dist/modules/ng2-tag-input.module";

and when I changed to:

import {TagInputModule} from "ng2-tag-input";

all is working

[alexandredavi]

@margielm Thanks, now it's working

[CyrilleGuimezanes]

@margielm Great! Thks, that work for me too!

@Gbuomprisco A known issue section could be usefull

[Gbuomprisco]

It's been here forever https://github.com/Gbuomprisco/ng2-tag-input#configuration :)

[margielm]

hello,

looks like it was there. But I think that Idea did incorrect import for me and then also this comment confused me a lot:

@CyrilleGuimezanes how are you including ng2-tag-input in your project? You should ensure you are using dist/ng2-tag-input.bundle.js.

[dougludlow]

@margielm sorry for the confusion. Glad you got it figured out!

[margielm]

Me too :) great component guys! thank you for all the hard work!!

[simonpeters]

When using auto import with webstorm it refers to "ng2-tag-input/dist/modules" instead of "ng2-tag-input". Might have something to do with the package.json configuration?

[Gbuomprisco]

@simonpeters possibly, yes, as the main file is located in dist/

[nolazybits]

tried to have

import {TagInputModule} from "ngx-chips";

but it still is failing
:/ any other ideas?

[EugenAz]

Still getting 404 for all tag-input template files too. Using angular-cli.

[Gbuomprisco]

can you please provide an online demo or at least a repository I can reproduce this with?

[EugenAz]

@Gbuomprisco Created a github repo but can't reproduce the issue... Will need some more time.

[Gbuomprisco]

it's usually a configuration issue. Try comparing the two configurations

[EugenAz]

Indeed was a stupid mistake. Sorry. Now it's ok, thanks a lot!