[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


Log in to reply