Components fail compilation

[elestedt]

Whenever I include ng2-semantic-ui in my components in the manner shown in the quickstart - they start silently failing compilation. No errors, the compilation just doesn't give any output. I don't have to add a directive, it's enough to just

import {TAB_DIRECTIVES} from "ng2-semantic-ui/ng2-semantic-ui";

Or any other DIRECTIVES for that matter. This of course is done after adding "ng2-semantic-ui": "^0.2.3" as a dependency, and the dependency has been downloaded.

[ghost]

Have you added it as a directive to the component?

@Component({
   selector: 'foo-component',
   directives: [TAB_DIRECTIVES],
   ...

[elestedt]

Yes, compilation still fails. And I think that compilation should never fail just because another component is imported.

[ghost]

Do you have any console errors? Really hard to try figure out the issue without any debug feedback. Just to confirm, if you remove the ng2-semantic-ui , then compilation works?

[elestedt]

I get no console errors, no compilation errors, nothing. The compiler simply doesn't compile it, and returns code 0 - which I can only assume means success.

Yes, as soon as the import is removed - the file compiles again.

[elestedt]

I deleted my node_nodules folder and had it download all again, then I happened across these errors when building:

node_modules/ng2-semantic-ui/components/accordion/accordion-panel.component.ts(30,5): error TS2322: Type 'EventEmitter<{
}>' is not assignable to type 'EventEmitter<boolean>'.
  Type '{}' is not assignable to type 'boolean'.
node_modules/ng2-semantic-ui/components/checkbox/checkbox.component.ts(25,5): error TS2322: Type 'EventEmitter<{}>' is n
ot assignable to type 'EventEmitter<boolean>'.
  Type '{}' is not assignable to type 'boolean'.
node_modules/ng2-semantic-ui/components/dimmer/dimmer.component.ts(33,5): error TS2322: Type 'EventEmitter<{}>' is not a
ssignable to type 'EventEmitter<boolean>'.
  Type '{}' is not assignable to type 'boolean'.
node_modules/ng2-semantic-ui/components/dropdown/dropdown.service.ts(25,5): error TS2322: Type 'EventEmitter<{}>' is not
 assignable to type 'EventEmitter<boolean>'.
  Type '{}' is not assignable to type 'boolean'.
node_modules/ng2-semantic-ui/components/dropdown/dropdown.service.ts(26,5): error TS2322: Type 'EventEmitter<{}>' is not
 assignable to type 'EventEmitter<boolean>'.
  Type '{}' is not assignable to type 'boolean'.
node_modules/ng2-semantic-ui/components/message/message.component.ts(16,5): error TS2322: Type 'EventEmitter<{}>' is not
 assignable to type 'EventEmitter<Message>'.
  Type '{}' is not assignable to type 'Message'.
    Property 'dismissible' is missing in type '{}'.
node_modules/ng2-semantic-ui/components/rating/rating.component.ts(32,5): error TS2322: Type 'EventEmitter<{}>' is not a
ssignable to type 'EventEmitter<number>'.
  Type '{}' is not assignable to type 'number'.
node_modules/ng2-semantic-ui/components/tab/tab.directive.ts(31,9): error TS2322: Type 'Observable<{}>' is not assignabl
e to type 'Observable<Tab>'.
  Type '{}' is not assignable to type 'Tab'.
    Property 'id' is missing in type '{}'.
node_modules/ng2-semantic-ui/components/tab/tab.directive.ts(86,5): error TS2322: Type 'EventEmitter<{}>' is not assigna
ble to type 'EventEmitter<boolean>'.
  Type '{}' is not assignable to type 'boolean'.
node_modules/ng2-semantic-ui/components/tab/tab.directive.ts(87,5): error TS2322: Type 'EventEmitter<{}>' is not assigna
ble to type 'EventEmitter<Tab>'.
  Type '{}' is not assignable to type 'Tab'.

If I fix those errors, I get the described behaviour. I did also setup a "clean" project and included the library - then everything works. So how come my compiler is complaining about this?

tsconfig.json:

{
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "module": "commonjs",
    "noEmitOnError": true,
    "noImplicitAny": false,
    "outDir": "../wwwroot/app/",
    "removeComments": false,
    "target": "es6"
  },
  "compileOnSave": true,
  "exclude": [
    "../node_modules",
    "node_modules",
    "wwwroot",
    "../wwwroot"
  ]
}

[ghost]

Not sure, but you should be targeting es5. Typescript compiles to es5 quite elegantly, unless its an edge case

[elestedt]

If I do, I get loads of compilation errors regarding angular2 not finding Promise, Set, Map and so on. Regardless, the 5-min startup I used to for clean test uses es6, and there everything works. But maybe there's a polyfill I need to add to get it working?

[elestedt]

Switching down to ES5 and adding the typings required just gets me back to the errors above.

[elestedt]

Ok, so I've narrowed it down to the outDir property - if I remove that, it works as expected :(

[ghost]

The outDir property is for the sourcemaps ( if i am not mistaken )

[edcarroll]

With the latest update (0.3.0) all of these compilation problems have been fixed - I am sorry it has taken so long!