I am experiencing a hard time trying to get ng2-bootstrap package to work

[giancarloa]

Hello...

For my project I need pagination support so I decided to give ng2-bootstrap a chance. But I am running into a series of problems trying to add the dependency ranging from compile errors to incorrect placement of TS output js files. I am using TS 1.7.4. At this point I am not sure where the blame should be placed, either with ng2-bootstrap, TS compiler, or myself. Here's what I did:

In my package.json file I added the following dependency: "ng2-bootstrap": "1.0.7". As a result of doing so the corresponding package is downloaded and placed in my "node_modules" folder. Great, so far so good.

Then I added the following code to the top of one of my TS classes:

import {PAGINATION_DIRECTIVES} from 'ng2-bootstrap/ng2-bootstrap';

Now after doing this is when problems begin to appear. At this point when I try to compile I get the following errors:

Severity    Code    Description Project File    Line    Suppression State
Error   TS2307  Cannot find module 'moment'.    TypeScript Virtual Projects C:\MyProject\src\MyProject\node_modules\ng2-bootstrap\components\datepicker\date-formatter.ts   1   Active
Error   TS2307  Build: Cannot find module 'moment'. MyProject   C:\MyProject\src\MyProject\node_modules\ng2-bootstrap\components\datepicker\date-formatter.ts   1   

So now I am scratching my head wondering why this is happening. I take a look at the offending file (date-formatters.ts) and see that it has the following code at top:
import * as moment from 'moment';

OK so I say to myself must be a missing reference or something so I better go find it. But before I do that my first question is: Why is the TS compiler trying to compile this TS file which resides in an excluded folder? My tsconfig file is located in the root of my project and it has the following:

"exclude": [
    "node_modules",
    "wwwroot"
  ]

Because of this my expectation is that the TS compiler should not compile anything inside the node_modules folder but apparently it is. Otherwise why would I get this error? So this is my first question. One thing I noticed about this particular node package is that it contains not only js and d.ts files but also ts files. Plus it also contains a tsconfig file. I am not sure if this has something to do with the problem.

Despite this question I proceeded to investigate the error looking for answers. I ran across the following post: "https://github.com/valor-software/ng2-bootstrap#with-webpack-angularclassangular2-webpack-starter". It basically states that I need to install moment.js including its typings. So I went ahead and did that. I installed the typings using the following command:

typings install moment --save

At this point in time I notice that my project now has a "typings" folder with a bunch of stuff in it. I also notice a new typings.json file at the root. OK great so then I proceed to compile. But then I get a bunch of errors that look like this:

Severity    Code    Description Project File    Line    Suppression State
Error   TS2300  Duplicate identifier 'export='. TypeScript Virtual Projects C:\MyProject\src\MyProject\typings\main\definitions\moment\index.d.ts   496 Active
Severity    Code    Description Project File    Line    Suppression State
Error   TS2300  Duplicate identifier 'export='. TypeScript Virtual Projects C:\MyProject\src\MyProject\typings\browser\definitions\moment\index.d.ts    496 Active

At this point I am 5 seconds away from blowing my head off with no idea whatsoever what's going on. I sort of understand the issue. Basically two TS files exporting the same thing I guess. So I am thinking to myself is this typings package buggy? Or is this a TS compiler issue/bug? No idea. So this is my second question.

So then I proceeded to investigate the above dup identifier error. I ran into the following: “https://github.com/Microsoft/TypeScript/issues/7369”. It basically states that I have to exclude various files when compiling. So I did that by adding some items to exclude in my tsconfig file:

"exclude": [
        "node_modules",
        "wwwroot",

        "typings/browser.d.ts",
        "typings/browser"
    ]

Specifically I added the last 2 entries above. So then I proceeded to compile again. This time I was able to compile with NO errors! Yay! I’m thinking to myself problem solved. But no…

Right before I was about to pat myself on the back for having gotten the compile errors to go away, I noticed that now the output structure of my js files is totally messed up!!!!! In other words after compiling, the js files generated by the TS compiler are not in the correct location anymore. Here’s what I have in my tsconfig file:
"outDir": "wwwroot/Scripts"
In my project all of my TS files are located inside a “Scripts” folder that is located on the root. Inside this folder I have various subfolders with TS files inside of them. So my directory structure looks something like this:
wwwroot
---Scripts
------Module1
---------File1.js
---------File2.js
------Module2
---------File1.js
---------File2.js
Scripts
---Module1
------File1.ts
------File2.ts
---Module2
------File1.ts
------File2.ts

Above is how things were working before I embarked on this journey. The above is correct. Now however after making all these changes the output looks like this:
wwwroot
---Scripts
------Scripts
---------Module1
------------File1.js
------------File2.js
---------Module2
------------File1.js
------------File2.js
---node_modules
------ng2-bootstrap
-----------...a whole bunch of js files and subfolder with js files

At this point I am basically 1 second away from blowing my head off. If you notice above suddenly my Scripts folder is nested inside the previous Scripts folder. And not only that there’s now a “node_modules” folder that contains an ng2-bootstrap folder that in turn contains a whole bunch of js files and subfolders with js files. Why is this happening? Again as I mentioned previously this particular ng2-bootstrap package ships with a bunch of ts files which is not something I have seen before. Most packages I have seen distribute only js and d.ts files. This package also includes a tsconfig file as well which is also not something I have seen before either. Just for the heck of it I manually deleted every ts file that comes with the package and sure enough the above problem with the directory structure goes away. In other words the presence of the ts files causes the problem to surface and their absence fixes the issue. Why is this happening? Is this a problem with the ng2-bootstrap package? Should it NOT contain ts files? Or is this a problem with the TS compiler? Why would the output structure change? Is it a problem with my project?

Any help with this would be greatly appreciated. Thank you

[mhegazy]

Error TS2307 Cannot find module 'moment'. TypeScript Virtual Projects C:\MyProject\src\MyProject\node_modules\ng2-bootstrap\components\datepicker\date-formatter.ts

this tells me that the author of the ng2-bootstrap package is including sources in the definition, which is generally a very bad idea, both for you having to deal with compilation errors, as well as compilation time.
All the files exported by a package should be definition files, i.e. .d.ts files

[mhegazy]

Because of this my expectation is that the TS compiler should not compile anything inside the node_modules folder but apparently it is.

see https://github.com/Microsoft/TypeScript/wiki/FAQ#why-does-a-file-in-exclude-list-is-still-picked-up-by-the-compiler for more information.

[mhegazy]

At this point I am 5 seconds away from blowing my head off with no idea whatsoever what's going on. I sort of understand the issue. Basically two TS files exporting the same thing I guess.

I have reported this issue to @blakeembrey a few times already. i believe he intends to fix it, typings/typings#151

[giancarloa]

@mhegazy ... thanks for the responses... and thanks for fixing the formatting... I will make sure to be more careful next time...

Do you happen to have any ideas on why the output directory structure changes?

[mhegazy]

At this point I am basically 1 second away from blowing my head off. If you notice above suddenly my Scripts folder is nested inside the previous Scripts folder. And not only that there’s now a “node_modules” folder that contains an ng2-bootstrap folder that in turn contains a whole bunch of js files and subfolders with js files. Why is this happening?

Well. the main issue here is again that ng2-bootstrap ships source files (i.e. .ts) files. from the compiler perspective, these are just input files, that you meant to compile, and then it will try to put them in your output folder...

[mhegazy]

@mhegazy ... thanks for the responses... and thanks for fixing the formatting... I will make sure to be more careful next time...

no worries, your formatting is jsut fine, i jsut got used to it, and it makes it easier for me to read :D

[mhegazy]

Do you happen to have any ideas on why the output directory structure changes?

The compiler does something fairly stupid to know what is the root of your project. i.e. where to start mirroring the input to the output directory in outDir. it tries to find the longest common path prefix of all input files. usually this is not what want.
use --rootDir to tell it where is the "root". in your case, i would expect it to be "outDir" : "scripts"

[mhegazy]

one more thing, i just want to say thanks for sharing this information. I do not believe setting up a package and consuming it should be that hard.
We are currently working on streamlining the whole process of producing and consuming external typings files, as there is a lot of confusion around it now, see https://github.com/Microsoft/TypeScript/issues?q=is%3Aopen+is%3Aissue+label%3ATypings; but that is not untill the next release. let me see what i can do in the meantime.

[giancarloa]

@mhegazy ... thanks for all the help... I've learned a lot today from your responses... I will go ahead and close this issue... I also plan on contacting the ng2-bootstrap team and let them know about the issue with distributing sources... thanks again

[valorkin]

I agree that I should hide ts files for now, but in general ts compiler should exclude excluded files :)

[mhegazy]

I agree that I should hide ts files for now, but in general ts compiler should exclude excluded files :)

This is not about excluded files. this is about an import statement. it points to a module, using the node module resolution, it is located in node_modules, the file found is a source file.

You can find more information in https://github.com/Microsoft/TypeScript/wiki/FAQ#why-does-a-file-in-exclude-list-is-still-picked-up-by-the-compiler

and more information about module resolution in general in http://www.typescriptlang.org/docs/handbook/module-resolution.html

[valorkin]

ok, so basically if file is resolved from node_modules it is meant to be .js.d.ts
soo, is there are a chance to have different resolution order for files from project and from modules?

[mhegazy]

Source files are always given higher precedence, as they are considered "closer" to truth, than a build output like .d.ts.
Originally we only resolved .d.ts from node_modules, and ppl have found that too restrictive, there are different ways to setup a project, and some user use npm packages to link to sources, and would like to import at design time to point to the source.

[valorkin]

what about giving to an author of module an option to set resolution precedence of .d.ts over .ts
with fallback to .ts files
my idea behind it:

• if consumer installs module from npm, he gets .d.ts + .js version
• if consumer installs module from git (via npm) he will be able to consume .ts files

without changing import statements
right now this is not really possible
what do you think? @mhegazy

[mhegazy]

should that be transitive? or only for one module? does that apply with path mapping or now? The process is already complicated. i would not want to through another option there.
@vladima had a validation tool that library authors can run. @vladima can you share your tool?

[valorkin]

not one for sure https://github.com/valor-software?utf8=%E2%9C%93&query=ng2

[giancarloa]

for now I have gotten around the issue by:

1. changing my tsconfig from ["outDir": "wwwroot/scripts"] to ["outDir": "wwwroot"]. at least now my TS scripts folder is not nested.

2. for now just live with the presence of a "node_modules\ng2-bootstrap" folder with a bunch of stuff in it that's produced by the TS compiler because the ng2-bootstrap package contains source TS files.

again... thanks all for your input...

@mhegazy ... thanks again...

[valorkin]

check again, ts files now in ts folder

[giancarloa]

@valorkin ... thank you... work great now...

[valorkin]

Awesome :)