Monaca Onsen UI Discord Chat Github Repo

[Angular2] "ons is not defined" using latest Angular-CLI

  • Hi all,

    I am trying to get OnsenUI set up in my new Angular2 project using the latest beta of Angular-CLI which uses Webpack. There was an earlier post about Angular-CLI here, but that is about an older version of the Angular-CLI that still uses SystemJS.

    The error I get when I load the page is “ons is not defined”. I have tried adding

    window.ons = require('onsenui');


    window['ons'] = require('onsenui/js/onsenui.js');

    in multiple files (app/index.ts, app/main.ts, ./main.ts) but to no avail.

    Can someone point me in the right direction? I think it would be good if there is documentation on how to set up OnsenUI using Angular-CLI since that is definitely the easiest way to get an Angular2 project up and running at the moment.

  • I figured it out. I needed these entries in my angular-cli.json:

          "styles": [
          "scripts": [

  • Thanks for the post, I agree the docs do need desperately updating in terms of support for Angular2 and the cli.

    I followed your steps and I managed to get past the ons is undefined error. I can call onsNotification.alert() and that all works great.

    However, I cannot seem to create any components as I am now getting
    ’ons-page is not a known element’

    I seem to have loaded everything apart from the components themselves - where there any other steps you followed apart from:

    1. npm install -save onsenui angular2-onsenui
    2. import { OnsenModule } from ‘angular2-onsenui’; (in app.module.ts)
    3. Listing OnsenModule as an import in app.module.ts
    4. The steps outlined above

    Many Thanks,

  • Sorry this was my own stupid fault I should have read the debug properly:

    needed to add

    import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from ‘@angular/core’;

    schemas: [

    to app.module.ts