Update to Angular 4, Fix ngSemantic is not a Module

.gitignore

@@ -6,4 +6,5 @@ demo/app/**/*.js
 npm-debug.log
 bundles
 typings
+typyings/!index.d.ts
 demoRC5

.travis.yml

@@ -1,5 +1,8 @@
+language: node_js
+node_js:
+  - '6.9.2'
+
 before_script:
-  - npm install typescript@1.8.10 -g
-  - npm install tslint@3.10.2 -g
   - npm install typings -g
+  - npm install
 script: tsc

CHANGELOG.md

@@ -1,3 +1,12 @@
+## 2.1 Added typings/index.d.ts to avoid Travis errors
+
+## version: 1.2
+- Fixed ngSemantic is not a module by using [@borisfeldmann](https://github.com/borisfeldmann) [solution](https://github.com/vladotesanovic/ngSemantic/issues/149#issuecomment-278855643)
+- Updated dependencies to more up to date angular
+- Fixed errors due to new angular version like dependencies on Tab and Accordion
+	- Zone.js in demo
+	- Removed Directive in Accordion, instead using the Accordion Component to initiate Jquery and input options
+
 ## version: 1.1.1
 
 - Update to RC.5, ng-semantic now use NgSemanticModule for bootstrapping.
@@ -8,7 +17,7 @@
 
 ## version: 1.0.36
 
-- Added [(model)] two way data binding to sm-select 
+- Added [(model)] two way data binding to sm-select
 
 ## version: 1.0.35
 

demo/app/app.module.ts

@@ -1,4 +1,4 @@
-import { NgModule }      from "@angular/core";
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA }      from "@angular/core";
 import { BrowserModule } from "@angular/platform-browser";
 import { HttpModule } from "@angular/http";
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
@@ -80,6 +80,7 @@ import { FetchJsonPipe, SearchArrayPipe } from "./pipes/array";
         FormsModule,
         routing,
         NgSemanticModule
-    ]
+    ],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class AppModule {}

ng-semantic.ts

@@ -13,7 +13,11 @@ import { SemanticSelectComponent } from "./ng-semantic/select/select";
 import { SemanticSearchComponent } from "./ng-semantic/search/search";
 import { SemanticLoaderComponent } from "./ng-semantic/loader/loader";
 import { SemanticCardComponent, SemanticCardsComponent } from "./ng-semantic/card/card";
-import { SemanticInputComponent, SemanticTextareaComponent, SemanticCheckboxComponent } from "./ng-semantic/input/input";
+import {
+  SemanticInputComponent,
+  SemanticTextareaComponent,
+  SemanticCheckboxComponent
+} from "./ng-semantic/input/input";
 import { SemanticSidebarComponent } from "./ng-semantic/sidebar/sidebar";
 import { SemanticTabsComponent, SemanticTabComponent } from "./ng-semantic/tab/tab";
 import { SemanticFlagComponent } from "./ng-semantic/flag/flag";
@@ -53,50 +57,51 @@ export *  from "./ng-semantic/shape/shape";
 export *  from "./ng-semantic/accordion/accordion";
 
 export let SEMANTIC_COMPONENTS: Array<any> = [
-	SemanticCardComponent,
-	SemanticCardsComponent,
-	SemanticContextMenuComponent,
-	SemanticInputComponent,
-	SemanticTextareaComponent,
-	SemanticCheckboxComponent,
-	SemanticMenuComponent,
-	SemanticMessageComponent,
-	SemanticSegmentComponent,
-	SemanticDimmerComponent,
-	SemanticTransitionComponent,
-	SemanticShapeComponent,
-	SemanticPopupComponent,
-	SemanticDropdownComponent,
-	SemanticListComponent,
-	SemanticSelectComponent,
-	SemanticFlagComponent,
-	SemanticSearchComponent,
-	SemanticItemComponent,
-	SemanticSidebarComponent,
-	SemanticProgressComponent,
-	SemanticModalComponent,
-	SemanticTabsComponent,
-	SemanticTabComponent,
-	SemanticButtonComponent,
-	SemanticLoaderComponent,
-	SemanticAccordionComponent,
-	SemanticAccordionItemComponent,
-	SemanticRatingComponent
+  SemanticCardComponent,
+  SemanticCardsComponent,
+  SemanticContextMenuComponent,
+  SemanticInputComponent,
+  SemanticTextareaComponent,
+  SemanticCheckboxComponent,
+  SemanticMenuComponent,
+  SemanticMessageComponent,
+  SemanticSegmentComponent,
+  SemanticDimmerComponent,
+  SemanticTransitionComponent,
+  SemanticShapeComponent,
+  SemanticPopupComponent,
+  SemanticDropdownComponent,
+  SemanticListComponent,
+  SemanticSelectComponent,
+  SemanticFlagComponent,
+  SemanticSearchComponent,
+  SemanticItemComponent,
+  SemanticSidebarComponent,
+  SemanticProgressComponent,
+  SemanticModalComponent,
+  SemanticTabsComponent,
+  SemanticTabComponent,
+  SemanticButtonComponent,
+  SemanticLoaderComponent,
+  SemanticAccordionComponent,
+  SemanticAccordionItemComponent,
+  SemanticRatingComponent
 ];
 
 export let SEMANTIC_DIRECTIVES: Array<any> = [
-	SMTooltipDirective,
-	SMVisibilityDirective,
-	SMDeviceVisibilityDirective
+  SMTooltipDirective,
+  SMVisibilityDirective,
+  SMDeviceVisibilityDirective
 ];
 
-import { NgModule } from "@angular/core";
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 
 @NgModule({
-	declarations: [ SEMANTIC_DIRECTIVES, SEMANTIC_COMPONENTS ],
-	exports:      [ SEMANTIC_COMPONENTS, SEMANTIC_DIRECTIVES ],
-	imports:      [ CommonModule, FormsModule, ReactiveFormsModule ]
+  declarations: [SEMANTIC_DIRECTIVES, SEMANTIC_COMPONENTS],
+  exports: [SEMANTIC_COMPONENTS, SEMANTIC_DIRECTIVES],
+  imports: [CommonModule, FormsModule, ReactiveFormsModule]
 })
-export class NgSemanticModule { }
+export class NgSemanticModule {
+}

ng-semantic/accordion/accordion.d.ts

@@ -1,6 +1,10 @@
-export declare class SemanticAccordionComponent {
+import { ElementRef, OnInit } from "@angular/core";
+export declare class SemanticAccordionComponent implements OnInit {
+    element: ElementRef;
     class: string;
     options: string;
+    constructor(element: ElementRef);
+    ngOnInit(): void;
 }
 export declare class SemanticAccordionItemComponent {
     class: string;

ng-semantic/accordion/accordion.ts

@@ -7,34 +7,41 @@ declare var jQuery: any;
  *
  * @link http://semantic-ui.com/modules/accordion.html
  */
-@Directive({
-    selector: "[smDirAccordion]"
-})
-class SMAccordionDirective implements OnInit {
-
-    @Input() smDirAccordion: string;
-
-    constructor(public element: ElementRef) {}
-
-    ngOnInit() {
-        jQuery(this.element.nativeElement).accordion(this.smDirAccordion || {});
-    }
-}
+// @Directive({
+//     selector: "[smDirAccordion]"
+// })
+// class SMAccordionDirective implements OnInit {
+//
+//     @Input() smDirAccordion: string;
+//
+//     constructor(public element: ElementRef) {}
+//
+//     ngOnInit() {
+//         jQuery(this.element.nativeElement).accordion(this.smDirAccordion || {});
+//     }
+// }
 
+// TODO REINSTATE [smDirAccordion]="options"
 @Component({
     changeDetection: ChangeDetectionStrategy.OnPush,
-    directives: [<Type>SMAccordionDirective],
+    // directives: [<Type>SMAccordionDirective],
     selector: "sm-accordion",
     styles: [`sm-accordion sm-accordion-item:first-child .title { border-top: none !important; }`],
     template: `
-<div class="ui accordion {{class}}" [smDirAccordion]="options">
+<div class="ui accordion {{class}}">
     <ng-content></ng-content>
 </div>
 `
 })
-export class SemanticAccordionComponent {
+export class SemanticAccordionComponent implements OnInit{
     @Input() class: string;
     @Input() options: string;
+
+    constructor(public element: ElementRef) {}
+
+    ngOnInit() {
+        jQuery(this.element.nativeElement).accordion(this.options || {});
+    }
 }
 
 @Component({

ng-semantic/tab/tab.ts

@@ -25,9 +25,8 @@ export class SemanticTabComponent implements AfterViewInit {
     }
   }
 }
-
+//directives: [<Type>SemanticTabComponent],
 @Component({
-  directives: [<Type>SemanticTabComponent],
   selector: "sm-tabs",
   template: `<div class="ui top attached tabular menu" #menu>
   <a class="item" [ngClass]="{'active': tab.active}" *ngFor="let tab of tabs; let i = index" [attr.data-tab]="i">{{tab.title}}</a>
@@ -36,7 +35,7 @@ export class SemanticTabComponent implements AfterViewInit {
 `
 })
 export class SemanticTabsComponent implements AfterViewInit {
-  @ContentChildren(<Type>SemanticTabComponent) tabs: QueryList<SemanticTabComponent>;
+  @ContentChildren(SemanticTabComponent) tabs: QueryList<SemanticTabComponent>;
   @ViewChild("menu") menu: ElementRef;
 
   constructor(public elementRef: ElementRef) {}

package.json

@@ -1,8 +1,8 @@
 {
   "name": "ng-semantic",
-  "version": "1.1.1",
+  "version": "1.2.1",
   "main": "./ng-semantic.js",
-  "description": "Angular2 building blocks based on Semantic UI",
+  "description": "Angular4 building blocks based on Semantic UI",
   "scripts": {
     "demo:lint": "tslint -c ./tslint.json 'demo/app/**/*.ts'",
     "library:lint": "tslint -c ./tslint.json 'ng-semantic/**/*.ts'",
@@ -18,7 +18,7 @@
     "url": "https://github.com/vladotesanovic/ngSemantic"
   },
   "engines": {
-    "node": ">= 5.4.1 < 6"
+    "node": ">= 6"
   },
   "keywords": [
     "angular",
@@ -34,27 +34,29 @@
   "homepage": "https://ng-semantic.herokuapp.com/",
   "license": "MIT",
   "devDependencies": {
-    "@angular/common": "2.0.0-rc.5",
-    "@angular/compiler": "2.0.0-rc.5",
-    "@angular/core": "2.0.0-rc.5",
-    "@angular/forms": "0.3.0",
-    "@angular/http": "2.0.0-rc.5",
-    "@angular/platform-browser": "2.0.0-rc.5",
-    "@angular/platform-browser-dynamic": "2.0.0-rc.5",
-    "@angular/router": "3.0.0-rc.1",
-    "@angular/upgrade": "2.0.0-rc.5",
-    "angular2-in-memory-web-api": "0.0.15",
-    "systemjs": "0.19.27",
+    "@angular/cli": "^1.0.1",
+    "@angular/common": "4.0.0",
+    "@angular/compiler": "4.0.0",
+    "@angular/core": "4.0.0",
+    "@angular/forms": "4.0.0",
+    "@angular/http": "4.0.0",
+    "@angular/platform-browser": "4.0.0",
+    "@angular/platform-browser-dynamic": "4.0.0",
+    "@angular/router": "4.0.0",
+    "angular-in-memory-web-api": "^0.3.1",
+    "codelyzer": "3.0.1",
+    "concurrently": "^3.4.0",
     "core-js": "^2.4.0",
-    "reflect-metadata": "^0.1.3",
-    "rxjs": "5.0.0-beta.6",
-    "zone.js": "^0.6.12",
-    "concurrently": "^2.2.0",
     "lite-server": "^2.2.2",
-    "systemjs-builder": "^0.15.26",
-    "tslint": "^3.14.0",
-    "typescript": "^1.8.10",
+    "reflect-metadata": "^0.1.3",
+    "rxjs": "^5.1.0",
     "typings": "^1.3.2",
-    "codelyzer": "0.0.20"
+    "zone.js": "^0.8.9",
+    "ts-node": "~2.0.0",
+    "tslint": "~4.5.1",
+    "typescript": "~2.2.0"
+  },
+  "dependencies": {
+
   }
 }

typings.json

@@ -4,5 +4,8 @@
     "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
     "jquery": "registry:dt/jquery#1.10.0+20160704162008",
     "node": "registry:dt/node#6.0.0+20160818175514"
+  },
+  "dependencies": {
+    "debug": "registry:npm/debug#2.0.0+20160723033700"
   }
 }

typings/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference path="globals/core-js/index.d.ts" />
+/// <reference path="globals/jasmine/index.d.ts" />
+/// <reference path="globals/jquery/index.d.ts" />
+/// <reference path="globals/node/index.d.ts" />
+/// <reference path="modules/debug/index.d.ts" />