Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

[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');
    

    and

    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": [
            "../node_modules/onsenui/css/onsen-css-components.css",
            "../node_modules/onsenui/css/onsenui.css"
          ],
          "scripts": [
            "../node_modules/onsenui/js/onsenui.js"
          ],
    


  • 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,
    Ed



  • 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: [
    CUSTOM_ELEMENTS_SCHEMA,
    ],

    to app.module.ts