3. Integrate OnsenUI in Angular 2

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

Integrate OnsenUI in Angular 2

  • B

    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.

    0
  • 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.

    1
  • B

    That solved the issue. Thank you!

    0