Angular-cli and angular2-onsen
-
I have created a new project using
ng new myproject --mobile
and thennpm 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.
-
@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 arequire('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
andnavigator
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.