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.

Angular-cli and angular2-onsen browsing