Integrate OnsenUI in Angular 2
-
I’m really struggling with integrating OnsenUI in my Angular 2 (version 4) App. The project was generated using the latest Angular CLI.
So if add in app.module.ts
import {OnsenModule} from 'angular2-onsenui'; import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core'; . . . @NgModule({ imports: [ OnsenModule, BrowserModule ], schemas: [CUSTOM_ELEMENTS_SCHEMA]
as it is described in the docs: https://onsen.io/v2/docs/guide/angular2/
I’m getting the following error:
Uncaught ReferenceError: ons is not defined at Object../node_modules/angular2-onsenui/dist/src/ons/notification.js (notification.js:5) at __webpack_require__ (bootstrap 43794b3…:54) at Object../node_modules/angular2-onsenui/dist/src/angular2-onsenui.js (angular2-onsenui.js:16) at __webpack_require__ (bootstrap 43794b3…:54) at Object../src/app/app.module.ts (app.component.ts:12) at __webpack_require__ (bootstrap 43794b3…:54) at Object../src/main.ts (environment.ts:8) at __webpack_require__ (bootstrap 43794b3…:54) at Object.2 (main.ts:12) at __webpack_require__ (bootstrap 43794b3…:54) ./node_modules/angular2-onsenui/dist/src/ons/notification.js @ notification.js:5 __webpack_require__ @ bootstrap 43794b3…:54 ./node_modules/angular2-onsenui/dist/src/angular2-onsenui.js @ angular2-onsenui.js:16 __webpack_require__ @ bootstrap 43794b3…:54 ./src/app/app.module.ts @ app.component.ts:12 __webpack_require__ @ bootstrap 43794b3…:54 ./src/main.ts @ environment.ts:8 __webpack_require__ @ bootstrap 43794b3…:54 2 @ main.ts:12 __webpack_require__ @ bootstrap 43794b3…:54 webpackJsonpCallback @ bootstrap 43794b3…:25 (anonymous) @ main.bundle.js:1
I don’t want to use the monaca template, this will not solve the problem.
-
Hi, @btx!
This problem is already mentioned in this topic.
If you want to use Onsen UI with Angular CLI, you have to add the following settings into your.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" ],
Currently we are preparing a new version of
angular2-onsenui
which supports Angular 4 and fixing the contents in onsen.io.
Thank you.
-
That solved the issue. Thank you!