Angular-cli and angular2-onsen



  • I have created a new project using ng new myproject --mobile and then npm install -save onsenui angular2-onsenui. I modified my angular-cli-build.js file to copy these two node_modules so that they get copied to the dist/vendor folder:

    'angular2-onsenui/dist/**/*.+(js|js.map)',
    'onsenui/**/*.+(js|js.map|css)'
    

    I have verified that the files are making it to that folder during ng build.

    I added them both to my system-config.ts:

    /***********************************************************************************************
     * User Configuration.
     **********************************************************************************************/
    /** Map relative paths to URLs. */
    const map: any = {
      'angular2-onsenui': 'vendor/angular2-onsenui/dist/angular2-onsenui',
      'onsenui': 'vendor/onsenui/js/onsenui'
    };
    
    /** User packages configuration. */
    const packages: any = {
      'angular2-onsenui': {defaultExtension: 'js'},
      'onsenui': {defaultExtension: 'js'}
    };
    

    in my app.component.ts file I import anguarl2-onsenui:

    import { Component } from '@angular/core';
    import { APP_SHELL_DIRECTIVES } from '@angular/app-shell';
    import {ONS_DIRECTIVES} from 'angular2-onsenui';
    
    @Component({
      moduleId: module.id,
      selector: 'app-root',
      template: `
      <h1>
        {{title}}
      </h1>
      `,
      styles: [],
      directives: [APP_SHELL_DIRECTIVES, ONS_DIRECTIVES]
    })
    export class AppComponent {
      title = 'app works!';
    }
    

    I keep getting this error:

    exports.onsNotification = ons.notification;
                              ^
    
    ReferenceError: ons is not defined
        at Object.<anonymous> (/Users/jessesanders/repo/wicshopper2/node_modules/angular2-onsenui/dist/src/ons/notification.js:2:27)
    
    

    I know I need to bring in the onsenui library and assign it to the global namespace, however, every which way I have attempted to do that, it fails. Not sure how to get this to work.


  • Onsen UI

    @briebug In our Angular2 templates we are doing it like this:

    // Onsen UI
    window.ons = require('onsenui');
    

    I guess there was some issue with import. Does that work for you?



  • Thanks for the reply. Import doesn’t work as it says it’s not a module:

    node_modules/onsenui/js/onsenui.d.ts' is not a module. Please contact the package author to update the package definition.
    

    When I attempt to use window.ons = require('onsenui');, it complains that it doesn’t know what window is. I have added a require in my app.component.ts using a require('onsenui') at the top of my file:

    require('onsenui');
    import {Component} from '@angular/core';
    import {APP_SHELL_DIRECTIVES} from '@angular/app-shell';
    import {ONS_DIRECTIVES} from 'angular2-onsenui';
    
    @Component({
    

    This get’s me past the ons is undefined error and now it starts complaining about navigator being undefined on line 51 in onsenui/js/onsenui.js. This is likely due to the way its being required in and how the file is defined.

    Is there something else I’m missing here?



  • Ok, finally got it figured out. Here is what we had to do to get it to work with angular-cli:

    angular-cli.json - make sure mobile is set to false. If you gen a project using --mobile, this flag will get set to true and objects like window and navigator won’t be available to the compiler.

    {
      "project": {
        "version": "1.0.0-beta.10",
        "name": "wicshopper2"
      },
      "apps": [
        {
          "main": "src/main.ts",
          "tsconfig": "src/tsconfig.json",
          "mobile": false
        }
      ],
    

    In angular-cli-build.js we tell the cli where to get the onsenui and angular2-onsenui files:

    module.exports = function(defaults) {
      return new Angular2App(defaults, {
        vendorNpmFiles: [
          'systemjs/dist/system-polyfills.js',
          'systemjs/dist/system.src.js',
          'zone.js/dist/**/*.+(js|js.map)',
          'es6-shim/es6-shim.js',
          'reflect-metadata/**/*.+(ts|js|js.map)',
          'rxjs/**/*.+(js|js.map)',
          '@angular/**/*.+(js|js.map)',
          'onsenui/**/*.+(js|js.map|css)',
          'angular2-onsenui/dist/**/*.+(js|js.map)'
        ]
      });
    };
    

    In system config we setup map and packages as such:

    /***********************************************************************************************
     * User Configuration.
     **********************************************************************************************/
    /** Map relative paths to URLs. */
    const map: any = {
      'angular2-onsenui': 'vendor/angular2-onsenui/dist/src'
    };
    
    /** User packages configuration. */
    const packages: any = {
      'angular2-onsenui': {
        defaultExtension: 'js',
        main: 'angular2-onsenui'
      },
    };
    

    In /src/app/index.ts we added:

    // this isn't ideal, however, this gets onsenui.js loaded 
    window['ons'] = require('vendor/onsenui/js/onsenui.js');
    export * from './environment';
    export * from './app.component';
    

    The final step was to add the css to the main index.html:

      <link rel="stylesheet" type="text/css" href="vendor/onsenui/css/onsenui.css">
      <link rel="stylesheet" type="text/css" href="vendor/onsenui/css/onsen-css-components.css">
      <link rel="stylesheet" type="text/css" href="vendor/onsenui/css/onsen-css-components-default.css">
    

    I hope this helps the next person who wants to use angular-cli instead of Monaca or other servers.


Log in to reply