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.