I support an existing WordPress website and wanted to output an Angular2 app on a particular page. For now this is just an experiment, but I’m hoping to replace a big part of the functional frontend with Angular.
I’m not going to go into detail about how to create your own plugin, how to create a shortcode or how to create an Angular 2 app. You can follow angular’s Quickstart guide on how to create the Angular app and just create it somewhere inside it’s own folder somewhere within your plugin’s folder. My Angular app is called ului, so I placed it in a folder called <mypluginfolder>/js/ului.
The most important part is that you want to make sure Angular can find your app code, which will be made up of a number of different files and you do this by including your plugin folder in your app’s system config. To do this we’re going to localize the script in WordPress and pass a variable to it named baseUrl, which will contain the path to our app’s folder under our plugin’s folder.
If you’ve followed the Angular Quickstart guide, there’ll be a systemjs.config.js in your app folder. Make a copy of this file and name it system-wp.config.js. I leave the original file untouched so that you can still run the app outside of the WordPress environment for testing purposes.
Now open the system-wp.config.js and add “baseUrl + ” under paths: and map: like this (see bold text in 2 places)
(function (global) {
System.config({
paths: {
// paths serve as alias
‘npm:’: baseUrl + ‘node_modules/’
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: baseUrl + ‘app’,
// angular bundles
‘@angular/core’: ‘npm:@angular/core/bundles/core.umd.js’,
‘@angular/common’: ‘npm:@angular/common/bundles/common.umd.js’,
‘@angular/compiler’: ‘npm:@angular/compiler/bundles/compiler.umd.js’,
‘@angular/platform-browser’: ‘npm:@angular/platform-browser/bundles/platform-browser.umd.js’,
‘@angular/platform-browser-dynamic’: ‘npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js’,
‘@angular/http’: ‘npm:@angular/http/bundles/http.umd.js’,
‘@angular/router’: ‘npm:@angular/router/bundles/router.umd.js’,
‘@angular/forms’: ‘npm:@angular/forms/bundles/forms.umd.js’,
// other libraries
‘rxjs’: ‘npm:rxjs’,
‘angular2-in-memory-web-api’: ‘npm:angular2-in-memory-web-api’,
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: ‘./main.js’,
defaultExtension: ‘js’
},
rxjs: {
defaultExtension: ‘js’
},
‘angular2-in-memory-web-api’: {
main: ‘./index.js’,
defaultExtension: ‘js’
}
}
});
})(this);
System.import(‘app’).catch(function (err) { console.error(err); });
Also note the very last line is in bold, so copy that into your file as well.
That’s it within the Angular 2 app side of things. Now within your WordPress plugin class, you need the following:
I do this within a class, but as most examples on the net seem to be non-OO style, I’ll do the same for this example.
add_shortcode(‘someshortcode’, ‘render_subscribers’);
function render_subscribers(){
wp_register_script( ‘uluishim’, plugin_dir_url( __FILE__ ) . ‘js/ului/node_modules/core-js/client/shim.min.js’);
wp_register_script( ‘uluizone’, plugin_dir_url( __FILE__ ) . ‘js/ului/node_modules/zone.js/dist/zone.js’);
wp_register_script( ‘uluireflect’, plugin_dir_url( __FILE__ ) . ‘js/ului/node_modules/reflect-metadata/Reflect.js’);
wp_register_script( ‘uluisystem’, plugin_dir_url( __FILE__ ) . ‘js/ului/node_modules/systemjs/dist/system.src.js’);
wp_register_script( ‘uluistart’, plugin_dir_url( __FILE__ ) . ‘js/ului/system-wp.config.js’, array(‘uluishim’, ‘uluizone’, ‘uluireflect’, ‘uluisystem’));
//This is the WordPress-specific part, we’re passing our app’s folder location to system-wp.config.js as the variable named baseUrl.
wp_localize_script(
‘uluistart’,
‘baseUrl’,
plugin_dir_url( __FILE__ ) . ‘js/ului/’
);
wp_enqueue_script( ‘uluistart’ );
//And here we just output the “container” for the AngularJS app, which is where the app will be displayed.
$output = “<my-app>Loading…</my-app>”;
return $output;
}
And that’s it, you can now run your AngularJS 2 app as a shortcode anywhere in WordPress. I’m not saying you should… but if it makes sense.