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.


  • Onsen UI

    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!


Log in to reply