aot.md

Ahead of time compilation (AOT)

When you use the PlatformBrowser in your bootstrap.ts for running the application, all components' templates needs to be compiled in your users' browsers.

This is not a good option for production use, since the compilation process consist of MAAAANY steps and needs to include the whole compiler package. Doing all this work every time someone loads your page is definitely a bad idea. For these reasons it's better to have ahead of time compilation (AOT) where all the templates for your components are compiled beforehand eg. on your server.

On the other hand, the JIT (Just in time compilation) way can be good for development.

Installation

First you'll need to install some additional packages for compiling templates from command line and different platform.

$ npm install --save-dev @slicky/compiler-cli
$ npm install --save-prod @slicky/platform-server

Configuration

Your files can't contain any code outside of classes or functions which uses browser API. It wound't work when compiled on server. Also all directives and components you want to precompile must be exported.

bootstrap.ts:

import {Container} from '@slicky/di';
import {Application} from '@slicky/core';
import {PlatformServer} from '@slicky/platform-server';
import {APP_TEMPLATES_FACTORY} from '../aot/app-templates-factory';

const container = new Container;
const platform = new PlatformServer(APP_TEMPLATES_FACTORY);
const app = new Application(container, {
	directives: [],			// list of your root directives and components
});

// run application in #app element
platform.run(app, '#app');

As you can see, we're including a new file app-templates-factory.ts which does not exists yet. This file will be generated by @slicky/compiler-cli from command line and contains all the components' templates.

To be able to compile your templates, you also need to update the tsconfig.json file and add following configuration:

{
	"slickyCompilerOptions": {
		"rootDir": ".",
		"outDir": "./aot",
		"exclude": [
			"bootstrap.ts"
		]
	}
}

• slickyCompilerOptions: Options passed into slicky's compiler
  • rootDir: Path to base directory which contains all your components
  • outDir: Path to directory where all the generated templates will be stored

Now you can run the command for generating templates, just provide path to tsconfig.json file:

$ node_modules/.bin/scc.js compile tsconfig.json

After running the command above, you'll find app-templates-factory.ts file in directory you wrote in slickyCompilerOptions.outDir.

You can finally rebuild your application (eg. with webpack) just like you would normally do.

Gulp

CLI compiler can be easily used in gulp too. For now there is no specialized plugin, but we can still use it with anonymous function.

import {Compiler} from '@slicky/compiler-cli';
import * as gulp from 'gulp';

gulp.task(`compile:aot`, (done) => {
	(new Compiler('tsconfig.json')).compile(() => {
		done();
	});
});

And run it:

$ gulp compile:aot

With webpack

You can use @slicky/webpack-loader to get even better results. That webpack loader will replace the template directly inside of your .ts component file, so the original string template will not be included at all. Also it contains some other optimizations as well.

Installation:

$ npm install @slicky/webpack-loader
$ npm install @slicky/platform-inline 

bootstrap.ts:

import {Container} from '@slicky/di';
import {Application} from '@slicky/core';
import {PlatformInline} from '@slicky/platform-inline';

const container = new Container;
const platform = new PlatformInline;
const app = new Application(container, {
	directives: [],			// list of your root directives and components
});

// run application in #app element
platform.run(app, '#app');

webpack config:

const config = {
	// ...
	module: {
		rules: [
			{
				test: /\.ts$/,
				use: [
					{
						loader: 'ts-loader',
						options: {
							configFile: './tsconfig.json',
						},
					},
					{
						loader: '@slicky/webpack-loader',
					},
				],
			},
		],
	},
};