Monaca Onsen UI Discord Chat Github Repo

Angular-cli and angular2-onsen

  • 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:


    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';
      selector: 'app-root',
      template: `
      styles: [],
    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.

  • Onsen UI

    @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?

  • 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:

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

    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?

  • 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: [

    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.