Issue 1:
Hello,

I have a generic component, e.g. class Select<T> extends React.Component<SelectProps<T>, any>. Is there any "right" way to use it from JSX?

It is impossible to write something like <Select<string> /> in JSX. The best thing that I've found is to write

let StringSelect: React.Component<SelectProps<string>, any> = Select;

And use StringSelect instead of Select<string>. Is there anything better?

Issue 2:
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