Rio with angular2-webpack-starter click events don't work

[otherjohn]

Ok, I am not sure even how to debug this, but I am trying to use Rio for my project which is extended from https://github.com/AngularClass/angular ... k-starter/.
The Rio template renders correctly, but if I click on a "menulink ripplelink", the "on(click)" event never fires. I tried following it in chrome dev tools using breakpoints but it never reaches the 'this.menulinks.on('click', function (e) {' function in the layout.js file. No errors are given and no 404 on files. It is as something is stopping the binded events in the layout.js from firing. I am wondering if it has something to do with typescript.

I followed https://github.com/primefaces/primeng-q ... rt-webpack on setting Rio up with angular2-webpack-starter.

I did the following:
webpack.js - copy the Rio files to assets folder

Code: Select all

new CopyWebpackPlugin([{
      from: 'src/assets',
      to: 'assets'
    },{
      from: 'resources',
      to: 'assets'
    },{
      from: 'node_modules/primeui/primeui-ng-all.min.css',
      to: 'assets/primeui/primeui-ng-all.min.css'
    },{
      from: 'node_modules/primeui/primeui-ng-all.min.js',
      to: 'assets/primeui/primeui-ng-all.min.js'
    }]),

index.html

Code: Select all

<link rel="stylesheet" type="text/css" href="assets/theme/theme.css">
  <link rel="stylesheet" type="text/css" href="assets/layout/css/core-layout.css">
  <link rel="stylesheet" type="text/css" href="assets/layout/css/animate.css">
  <link rel="stylesheet" type="text/css" href="assets/layout/css/rio-font.css">
  <link rel="stylesheet" type="text/css" href="assets/layout/css/ripple-effect.css">
  <link rel="stylesheet" type="text/css" href="assets/layout/css/perfect-scrollbar.css">
  <link rel="stylesheet" type="text/css" href="assets/layout/css/font-awesome.min.css">
  <link rel="stylesheet" type="text/css" href="assets/layout/css/rio-layout.css">
  <link rel="stylesheet" type="text/css" href="assets/primeui/primeui-ng-all.min.css" />

  <script src="assets/primeui/primeui-ng-all.min.js"></script>
  <script src="assets/layout/js/perfect-scrollbar.js"></script>
  <script src="assets/layout/js/layout.js"></script>

vendor.ts

Code: Select all

import 'script!./assets/layout/js/layout.js';
import 'script!./assets/layout/js/perfect-scrollbar.js';
import 'script!primeui/primeui-ng-all.min.js';

app.component.ts

Code: Select all

declare var Rio: any;
...
...
ngAfterViewInit() {
    Rio.init();
    console.log('Wush.init');
  }

[mert.sincan]

Thanks for the sample codes. I 'll check and get back to you.

[otherjohn]

I also tried the following:
* NOT putting the import scripts inside the vendor.ts file.
* JUST putting the primeui-ng-all.min.js scripts inside the vendor.ts file.
* JUST putting the scripts inside the index.html.
* JUST importing primeNG and primeUI (still no click events.)
* REMOVING Material2 in case that was screwing it up somehow.

Here is my package.json

Code: Select all

 "dependencies": {
    "@angular/common": "2.0.0-rc.1",
    "@angular/compiler": "2.0.0-rc.1",
    "@angular/core": "2.0.0-rc.1",
    "@angular/http": "2.0.0-rc.1",
    "@angular/platform-browser": "2.0.0-rc.1",
    "@angular/platform-browser-dynamic": "2.0.0-rc.1",
    "@angular/platform-server": "2.0.0-rc.1",
    "@angular/router": "2.0.0-rc.1",
    "@angular/router-deprecated": "2.0.0-rc.1",
    "@angular2-material/button": "2.0.0-alpha.4",
    "@angular2-material/card": "2.0.0-alpha.4",
    "@angular2-material/checkbox": "2.0.0-alpha.4",
    "@angular2-material/core": "2.0.0-alpha.4",
    "@angular2-material/input": "2.0.0-alpha.4",
    "@angular2-material/list": "2.0.0-alpha.4",
    "@angular2-material/progress-bar": "2.0.0-alpha.4",
    "@angular2-material/progress-circle": "2.0.0-alpha.4",
    "@angular2-material/radio": "2.0.0-alpha.4",
    "@angular2-material/sidenav": "2.0.0-alpha.4",
    "@angular2-material/toolbar": "2.0.0-alpha.4",
    "angular2-jwt": "^0.1.15",
    "angularfire2": "^2.0.0-beta.0",
    "core-js": "^2.2.2",
    "firebase": "^2.4.2",
    "jquery": "^2.2.3",
    "ng2-redux": "^2.3.3",
    "normalize.css": "^4.1.1",
    "primeng": "^1.0.0-beta.6",
    "primeui": "^4.1.11",
    "redux": "^3.5.2",
    "redux-localstorage": "^0.4.0",
    "redux-logger": "^2.6.1",
    "redux-thunk": "^2.1.0",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "~0.6.12"
  },
  "devDependencies": {
    "angular2-hmr": "~0.7.0",
    "awesome-typescript-loader": "~0.17.0",
    "codelyzer": "~0.0.19",
    "compression-webpack-plugin": "^0.3.1",
    "copy-webpack-plugin": "^2.1.3",
    "css-loader": "^0.23.1",
    "es6-promise": "^3.1.2",
    "es6-promise-loader": "^1.0.1",
    "es6-shim": "^0.35.0",
    "es7-reflect-metadata": "^1.6.0",
    "exports-loader": "^0.6.3",
    "expose-loader": "^0.7.1",
    "file-loader": "^0.8.5",
    "html-webpack-plugin": "^2.17.0",
    "http-server": "^0.9.0",
    "imports-loader": "^0.6.5",
    "istanbul-instrumenter-loader": "^0.2.0",
    "json-loader": "^0.5.4",
    "karma": "^0.13.22",
    "karma-chrome-launcher": "^1.0.1",
    "karma-coverage": "^1.0.0",
    "karma-jasmine": "^1.0.2",
    "karma-mocha-reporter": "^2.0.0",
    "karma-phantomjs-launcher": "^1.0.0",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "1.7.0",
    "parse5": "^1.5.1",
    "phantomjs-polyfill": "0.0.2",
    "phantomjs-prebuilt": "^2.1.7",
    "protractor": "^3.2.2",
    "raw-loader": "0.5.1",
    "remap-istanbul": "^0.6.3",
    "rimraf": "^2.5.2",
    "script-loader": "^0.6.1",
    "source-map-loader": "^0.1.5",
    "style-loader": "^0.13.1",
    "ts-loader": "^0.8.1",
    "ts-helpers": "1.1.1",
    "ts-node": "^0.7.1",
    "tslint": "^3.7.1",
    "tslint-loader": "^2.1.3",
    "typedoc": "^0.3.12",
    "typescript": "~1.8.9",
    "typings": "~1.0.3",
    "url-loader": "^0.5.7",
    "webpack": "^1.12.14",
    "webpack-dev-server": "^1.14.1",
    "webpack-md5-hash": "^0.0.5",
    "webpack-merge": "^0.12.0"
  },

[otherjohn]

Any luck?
Are you able to replicate it? If not, I can create a repo to clone.

[otherjohn]

Ok, I found the issue. It was that I was doing the Rio.Init() in App.component but my menu code is in sub-component. So it was not actually firing as expected.

[mert.sincan]

Thanks for the update! Is this issue resolved?

[otherjohn]

Yes, it is resolved. Thanks.

[mert.sincan]

Thanks a lot! I think this issue can help to other users. Thanks again!