Ionic2: How to package external modules including the css?

Question

I am just learning Ionic2, and trying to include the first of an external module, in this case Ag-Grid .

Following the instructions here , I've installed the node package, so I have the following in my package.json

"ag-grid": "^4.2.7",
"ag-grid-ng2": "^4.2.2",

I have imported into the test .ts file and included the directive ..

...
import {AgGridNg2} from 'ag-grid-ng2/main'
import {GridOptions} from 'ag-grid/main'

@Component({
   directives: [AgGridNg2],
   templateUrl: 'build/pages/aggrid-page/aggrid-page.html'
})
export class AgGridPage {
   public data: Array<GridRow>;
   public columnDefs;
   public gridOptions: any;
   public showToolPanel;
   ...

This is all I have done, and somehow the AgGrid does appear in the final app.bundle.js , eg in app.bundle.js I see

var AgGridNg2 = (function () {
function AgGridNg2(elementDef) {
    var _this = this;
    this.elementDef = elementDef;
    // not intended for user to interact with. so putting _ in so if user gets reference
 ...

as well as lot of other AgGrid related stuff.

My first question is how does this get here?

I don't see any reference to it in the main Ionic gulp file. Does browserfy add it after seeing the references in my ts file as shown below?

....
import {AgGridNg2} from 'ag-grid-ng2/main'
import {GridOptions} from 'ag-grid/main'

@Component({
    directives: [AgGridNg2],
  templateUrl: 'build/pages/aggrid-page/aggrid-page.html'
 })
...

The next question is how to package the css files?

The ag documentation says to link to the files..

<link href="node_modules/ag-grid/styles/ag-grid.css" rel="stylesheet" />
<link href="node_modules/ag-grid/styles/theme-fresh.css" rel="stylesheet" />

but these are not found when I add it to the index.html . The grid does need them, as is does not display until I do have them included, which I did by adding them to a temp folder under the build folder, and linking to them there, at which stage the grid then displayed correctly.

So wondering how to package them (does css end up in app.bundle.js too), and then reference them?

Thanks in advance for any pointers here.

Answer 1

My first question is how does this get here?

Just like you said,

The import statement tells the system it can get both AgGridNg2 and GridOptions components from a module named ag-grid-ng2/main and ag-grid/main . The module name (AKA module id) is often the same as the filename without its extension.

So then ionic-gulp-browserify-typescript transpile and bundle the sources and that's why you can see them in your app.bundle.js .

The next question is how to package the css files?

I don't really know if there's an official way to do that but I prefer to do it by creating a new folder in my /app/theme folder called plugins and then adding a new file for each plugin with .scss extension, and then including them in the app.core.scss .

The way it works is pretty similar to what we see in the previous question. In your gulpfile.js you will see a task called sass which is executed when any .scss is changed:

gulpWatch('app/**/*.scss', function(){ gulp.start('sass'); });

So ionic-gulp-sass-build will compile your scss styles into css .

Finally, you can see in your /www/index.html the result of that task (so your compiled styles) being imported:

<link ios-href="build/css/app.ios.css" rel="stylesheet">
<link md-href="build/css/app.md.css" rel="stylesheet">
<link wp-href="build/css/app.wp.css" rel="stylesheet">