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