Angular-cli and angular2-onsen

[briebug]

I have created a new project using ng new myproject --mobile and then npm install -save onsenui angular2-onsenui. I modified my angular-cli-build.js file to copy these two node_modules so that they get copied to the dist/vendor folder:

'angular2-onsenui/dist/**/*.+(js|js.map)',
'onsenui/**/*.+(js|js.map|css)'

I have verified that the files are making it to that folder during ng build.

I added them both to my system-config.ts:

/***********************************************************************************************
 * User Configuration.
 **********************************************************************************************/
/** Map relative paths to URLs. */
const map: any = {
  'angular2-onsenui': 'vendor/angular2-onsenui/dist/angular2-onsenui',
  'onsenui': 'vendor/onsenui/js/onsenui'
};

/** User packages configuration. */
const packages: any = {
  'angular2-onsenui': {defaultExtension: 'js'},
  'onsenui': {defaultExtension: 'js'}
};

in my app.component.ts file I import anguarl2-onsenui:

import { Component } from '@angular/core';
import { APP_SHELL_DIRECTIVES } from '@angular/app-shell';
import {ONS_DIRECTIVES} from 'angular2-onsenui';

@Component({
  moduleId: module.id,
  selector: 'app-root',
  template: `
  <h1>
    {{title}}
  </h1>
  `,
  styles: [],
  directives: [APP_SHELL_DIRECTIVES, ONS_DIRECTIVES]
})
export class AppComponent {
  title = 'app works!';
}

I keep getting this error:

exports.onsNotification = ons.notification;
                          ^

ReferenceError: ons is not defined
    at Object.<anonymous> (/Users/jessesanders/repo/wicshopper2/node_modules/angular2-onsenui/dist/src/ons/notification.js:2:27)

I know I need to bring in the onsenui library and assign it to the global namespace, however, every which way I have attempted to do that, it fails. Not sure how to get this to work.

[Fran Diox]

@briebug In our Angular2 templates we are doing it like this:

// Onsen UI
window.ons = require('onsenui');

I guess there was some issue with import. Does that work for you?

[briebug]

Thanks for the reply. Import doesn’t work as it says it’s not a module:

node_modules/onsenui/js/onsenui.d.ts' is not a module. Please contact the package author to update the package definition.

When I attempt to use window.ons = require('onsenui');, it complains that it doesn’t know what window is. I have added a require in my app.component.ts using a require('onsenui') at the top of my file:

require('onsenui');
import {Component} from '@angular/core';
import {APP_SHELL_DIRECTIVES} from '@angular/app-shell';
import {ONS_DIRECTIVES} from 'angular2-onsenui';

@Component({

This get’s me past the ons is undefined error and now it starts complaining about navigator being undefined on line 51 in onsenui/js/onsenui.js. This is likely due to the way its being required in and how the file is defined.

Is there something else I’m missing here?

[briebug]

Ok, finally got it figured out. Here is what we had to do to get it to work with angular-cli:

angular-cli.json - make sure mobile is set to false. If you gen a project using --mobile, this flag will get set to true and objects like window and navigator won’t be available to the compiler.

{
  "project": {
    "version": "1.0.0-beta.10",
    "name": "wicshopper2"
  },
  "apps": [
    {
      "main": "src/main.ts",
      "tsconfig": "src/tsconfig.json",
      "mobile": false
    }
  ],

In angular-cli-build.js we tell the cli where to get the onsenui and angular2-onsenui files:

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      'systemjs/dist/system-polyfills.js',
      'systemjs/dist/system.src.js',
      'zone.js/dist/**/*.+(js|js.map)',
      'es6-shim/es6-shim.js',
      'reflect-metadata/**/*.+(ts|js|js.map)',
      'rxjs/**/*.+(js|js.map)',
      '@angular/**/*.+(js|js.map)',
      'onsenui/**/*.+(js|js.map|css)',
      'angular2-onsenui/dist/**/*.+(js|js.map)'
    ]
  });
};

In system config we setup map and packages as such:

/***********************************************************************************************
 * User Configuration.
 **********************************************************************************************/
/** Map relative paths to URLs. */
const map: any = {
  'angular2-onsenui': 'vendor/angular2-onsenui/dist/src'
};

/** User packages configuration. */
const packages: any = {
  'angular2-onsenui': {
    defaultExtension: 'js',
    main: 'angular2-onsenui'
  },
};

In /src/app/index.ts we added:

// this isn't ideal, however, this gets onsenui.js loaded 
window['ons'] = require('vendor/onsenui/js/onsenui.js');
export * from './environment';
export * from './app.component';

The final step was to add the css to the main index.html:

  <link rel="stylesheet" type="text/css" href="vendor/onsenui/css/onsenui.css">
  <link rel="stylesheet" type="text/css" href="vendor/onsenui/css/onsen-css-components.css">
  <link rel="stylesheet" type="text/css" href="vendor/onsenui/css/onsen-css-components-default.css">

I hope this helps the next person who wants to use angular-cli instead of Monaca or other servers.