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

ypniag

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.

ypniag

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"
      ],

EdByrnee

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:

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

Many Thanks,
Ed

EdByrnee

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