---
myst:
  html_meta:
    "description": ""
    "property=og:description": ""
    "property=og:title": ""
    "keywords": ""
---

# Exercise 12: NG2 APP In Logged In Bundle

```{warning}
This exercise requires a working buildout using a fork of the `collective.jstraining` package.
```

For this exercise, we will add an Angular 2 application to a Plone bundle.

We have most of the Angular 2 boilerplate code created for you so let us finish up a few things so you can customize it.

You will be working in the `exercise12` directory of the `collective.jstraining` package.

## Bootstrap

Install npm dependencies

```console
cd exercise12/static
npm install
```

## Add Your Angular 2 Component

In your `exercise12/static/app` directory, add a file named `app.component.ts`.
Use this file to do anything you would like to the page.

This example will stick with the Angular 2 quick start code.

We hope you like TypeScript.

```typescript
import { Component } from '@angular/core';
@Component({
  selector: '.my-app',
  template: '<h1>NG2 from Exercise 12</h1>'
})
export class AppComponent { }
```

You can do whatever in this module.
However please notice how we changed the selector to `.my-app`.

In Angular 2, the selector can be anything.

By changing it to a class name, it will be easier for us to choose where we want to bootstrap our Angular 2 component.

## Register Static Resource Directory

Next, let us register the static directory we just placed our script into.

To register it, you need to add {term}`ZCML` registration for the static directory your script is in.

Add this to the `exercise12/configure.zcml` file:

```xml
<plone:static
     directory="static"
     type="plone"
     name="exercise12"
     />
```

## Build The File With Webpack

Our deployment is built using webpack

```console
cd exercise12/static
webpack
```

Whenever you make a change to your component files, webpack will automatically re-build the distribution.

## Register JavaScript Resource

Let us register our script as a JavaScript resource with Plone.
In the `exercise12/profiles/default/registry.xml` file, add configuration to register your script:

```xml
<records prefix="plone.bundles/exercise12"
         interface='Products.CMFPlone.interfaces.IBundleRegistry'>
  <value key="merge_with">logged-in</value>
  <value key="enabled">True</value>
  <value key="compile">False</value>
  <value key="expression">python: member is not None</value>
  <value key="jscompilation">++plone++exercise12/exercise12-compiled.min.js</value>
  <value key="csscompilation">++plone++exercise12/exercise12-compiled.css</value>
  <value key="last_compilation">2016-10-04 00:00:00</value>
</records>
```

Pay attention to this part of the exercise.

- Here we merge the bundle with `logged-in` instead of `default`.
- We also added an `expression` configuration option to specify that we only want this bundle to load for logged in users.

## Installation

1. Start up your Plone instance
2. Install the `Exercise 12` add-on

## Running

It is up to you how to apply the component class name to an element of your choice.

A couple options available to you are:

1. use TinyMCE source view and add `class="my-app"` onto any tag
2. customize the theme on your site and add it to an element in your theme file or use a diazo rule to dynamically add the class to an element.

```{warning}
To make sure your resource registry configuration changes apply, you will need to be in development mode.

You can also toggle development mode on and off, click save, to force configuration to be re-built after changes instead of keeping development mode on.
```

## Development

To make sure your changes are loaded after every build with webpack, make sure to go into Site {guilabel}`Setup --> Resource registries` and enable development mode.

### Production

Production for this is simple when you are no longer in development mode on your Plone site.

Webpack rebuilds the JavaScript distribution on every change.