Can't resolve modules\components\icon.js

[ZuSe]

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

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

Current behavior
We are using ng2-tag-input version 1.0.5 in our angular-seed based project.
When we try to use the aot compile we get the following issue:

Message:
    Error on fetch for ng2-tag-input/dist/modules/components/icon.js at file:///P:/Repositories/workspace_angular2/node_modules/ng2-tag-input/dist/modules/components/icon.js
        Loading ng2-tag-input/dist/modules/ng2-tag-input.module.js
        Loading dist\tmp\app\app.module.ngfactory.js
        Loading dist\tmp\app\main-prod.js
        ENOENT: no such file or directory, open 'P:\Repositories\workspace_angular2\node_modules\ng2-tag-input\dist\modules\components\icon.js'
Details:
    originalErr: Error: ENOENT: no such file or directory, open 'P:\Repositories\workspace_angular2\node_modules\ng2-tag-input\dist\modules\components\icon.js'
Stack:
Error on fetch for ng2-tag-input/dist/modules/components/icon.js at file:///P:/Repositories/workspace_angular2/node_modules/ng2-tag-input/dist/modules/components/icon.js
        Loading ng2-tag-input/dist/modules/ng2-tag-input.module.js
        Loading dist\tmp\app\app.module.ngfactory.js
        Loading dist\tmp\app\main-prod.js
        Error: ENOENT: no such file or directory, open 'P:\Repositories\workspace_angular2\node_modules\ng2-tag-input\dist\modules\components\icon.js'
    at Error (native)

I have added the deps to systemjs config as described in the readme, but it seems to have no effect.

I would really appreciate any advise.

Best Regards,
ZuSe

[Gbuomprisco]

Check out Gbuomprisco/ng2-material-dropdown#23 (comment), it could help?

[JunusErgin]

I'm having the same problem with the angular seed project of mgechev.

My SystemJS config looks like the following:

    // NG2-TAG-INPUT
    additionalPackages.push({
      name: 'ng2-tag-input',
      path: `${this.NPM_BASE}ng2-tag-input/dist/ng2-tag-input.bundle.js`,
      packageMeta: {
        main: 'dist/ng2-tag-input.bundle.js',
        format: 'cjs'
      }
    });

    // NG2-MATERIAL-DROPDOWN
    additionalPackages.push({
      name: 'ng2-material-dropdown',
      path: `${this.NPM_BASE}ng2-material-dropdown/dist/ng2-dropdown.bundle.js`,
      packageMeta: {
        defaultExtension: 'js',
        main: 'dist/ng2-material.bundle.js',
        format: 'cjs'
      }
    });

I also tried to add the template you suggested:

    additionalPackages.push({
      name: 'ng2-tag-input/modules/components/tag-input.template.html',
      packageMeta: {
        defaultJSExtension: false
      }
    });

I still receive the same error:

[11:24:46] Error on fetch for ng2-tag-input/dist/modules/components/icon.js at file:///C:/Dev/my_project_angular2/node_modules/ng2-tag-input/dist/modules/components/icon.js
        Loading ng2-tag-input/dist/modules/ng2-tag-input.module.js
        Loading dist\tmp\app\app.module.ngfactory.js
        Loading dist\tmp\app\main-prod.js
        Error: ENOENT: no such file or directory, open 'C:\Dev\my_project_angular2\node_modules\ng2-tag-input\dist\modules\components\icon.js'
    at Error (native)
[11:24:46] 'build.prod.aot' errored after 1.43 min
[11:24:46] Error in plugin 'run-sequence(build.bundles.app.aot)'
Message:
    Error on fetch for ng2-tag-input/dist/modules/components/icon.js at file:///C:/Dev/my_project_angular2/node_modules/ng2-tag-input/dist/modules/components/icon.js
        Loading ng2-tag-input/dist/modules/ng2-tag-input.module.js
        Loading dist\tmp\app\app.module.ngfactory.js
        Loading dist\tmp\app\main-prod.js
        ENOENT: no such file or directory, open 'C:\Dev\my_project_angular2\node_modules\ng2-tag-input\dist\modules\components\icon.js'
Details:
    originalErr: Error: ENOENT: no such file or directory, open 'C:\Dev\my_project_angular2\node_modules\ng2-tag-input\dist\modules\components\icon.js'
Stack:
Error on fetch for ng2-tag-input/dist/modules/components/icon.js at file:///C:/Dev/my_project_angular2/node_modules/ng2-tag-input/dist/modules/components/icon.js
        Loading ng2-tag-input/dist/modules/ng2-tag-input.module.js
        Loading dist\tmp\app\app.module.ngfactory.js
        Loading dist\tmp\app\main-prod.js
        Error: ENOENT: no such file or directory, open 'C:\Dev\my_project_angular2\node_modules\ng2-tag-input\dist\modules\components\icon.js'
    at Error (native)

@Gbuomprisco sorry, the commet you linked didn't help me.

Anyone has any suggestion how to solve this issue?

[Gbuomprisco]

@JunusErgin,

I would honestly ask this question on the seed's repo instead. Webpack works, Angular cli too, it's just SystemJS based configs that always have something wrong. Sorry I can't help more than this

[JunusErgin]

I also opened an issue in the Angular seed project. It would still be great if someone proposes a solution here.

[Gbuomprisco]

Thanks. Just reading here https://github.com/mgechev/angular-seed/wiki/Add-external-dependency.

Can you try:

// Add packages (e.g. angular2-jwt)
let additionalPackages: ExtendPackages[] = [{
  name: 'ng2-tag-input',
  path: 'node_modules/ng2-tag-input'
}];

this.addPackagesBundles(additionalPackages);

and if it won't work, try adding

packageMeta: {
        defaultExtension: 'js',
        main: 'dist/ng2-tag-input.bundle.js',
        format: 'cjs'
}

[JunusErgin]

Thanks for your answer @Gbuomprisco. The error message is still the same, nothing did change.

[ZuSe]

From what I see the problem is caused by the import inside the module.ts file.
For some reason require(./components/icon) can not be resolved properly by system-js.

@Gbuomprisco is there any chance to bundle everything as amd bundle?

[Gbuomprisco]

Hi @ZuSe,

it is a UMD bundle (so should work with any type of config). Sorry if archive this, but I don't honestly think the issue is in the package. I'll keep helping regardless - but I haven't used SystemJS in a long while

[JunusErgin]

As you cannot provide an AMD bundle and the imports are not working with the SystemJS build of the Angular 2 Seed project, i decided to kick out the library and use angular2-tag-input instead.

[ZuSe]

@Gbuomprisco
I would recommend to leave the ticket open for future people that struggle with an SystemJS build.
As soon as I have some free time I will take a more detailed look on it.
There are tons of other libs around that have no problem with supporting SystemJS

[chrisbmoore]

I am also using the latest of mgechev's seed project that uses SystemJS. I never had issues with the icon, but I did have issues getting the template to show correctly. It would always show empty tags and no page errors were ever displayed. I got this to work by specifying my own tag template manually in my component template. Hopefully this help anyone who has my issue.

I have no advice on the icon problem besides making sure your seed project is up to date. I'm using the exact same configs as JunusErgin. I'm also using latest Chrome. I'm not sure what else it could be.

Edit: I'll also mention that I don't see any "node_modules/ng2-tag-input/dist/modules/components/icon.js" as I only see "node_modules/ng2-tag-input/dist/modules/components/icon/icon.js". I don't know why it's looking for the first path for you.

Edit 2: So related to my issue, I had to import BrowserAnimationsModule in my module to get my tags to work correctly. Related to this issue #325

[Gbuomprisco]

Thanks very much for helping on this @chrisbmoore

[ZuSe]

@chrisbmoore Are you using the aot build in the seed project? I only get it there, normal build works as it should.

[ZuSe]

@chrisbmoore @Gbuomprisco
You can check here for my changes:
ZuSe/angular2-seed@6e8da28

Just to reproduce it on a plain seed project with running build.prod.aot as it's predefined

[chrisbmoore]

@ZuSe I haven't tried AoT yet, but it does build and work for me on normal dev and prod build/serve commands. I'll try AoT when I get home. Your setup seems to match mine exactly too. That is strange.

[Gbuomprisco]

Looks like the issue is that SystemJS doesn't understand barrel files like https://github.com/Gbuomprisco/ng2-tag-input/blob/master/modules/ng2-tag-input.module.ts#L5.

So thinks icon is icon.js, but instead is icon/index.ts

[bnormoyle]

Any update on this? I'd like to use the library, but I can't use it with SystemJS while it's still using barrel imports.

[Gbuomprisco]

@bnormoyle no, sorry. I recommend using Webpack or the cli