embark-angular

This project was generated with Embark 3.2.3 and Angular CLI version 7.0.2.

About

This repository is a proof of concept to show how to make embark work with angular-cli.

The main purpose is to find a way to develop Angular Decentralized application with embark.

I'm convinced that it's important to have an angular.json config to make angular-cli compatible with embark project for other tasks than building.

This work in progress:

• build webpack configs dynamically with angular-devkit browser builder ;
• write typings for EmbarkJS and web3 globals ;
• write components example like embark demo ;
• setup Jest to run unit tests ;
• setup Storybook ;
• make e2e tests works ;
• try to enable hmr in dev mode.

Getting started

Install embark

You need to install embark as described in the embark installation guide.

In next steps, we assume you have install embark prerequisites and global embark module.

Patch embark pipeline

We need to patch embark v3.2.3 global module to make embark works when index.html is missing from embark.json.

Why we need to exclude index.html from embark config?

During embark build, a placeholder page is used as index.html. When a webpack build done, the placeholder page is replaced by a copy of index.html. That works well with default webpack config generated by embark.

But webpack plugins can apply some updates in html sources like angular does through IndexHtmlWebpackPlugin which add script and style imports dynamically.

The problem is that embark pipeline overwrites the index.html output which has script/style imports by its source which doesn't have them.

We can't add script/style imports manually in the index.html source because there aren't the same for development and production builds (depends on angular browser builder options defined in angular.json build target).

Finally, we have chosen to remove index.html entry from embark.json config and patch embark pipeline to allow config without index.html. In that way, we prevent embark pipeline to overwrite index.html which has script/style imports added dynamically.

Locate embark global module path

You can easily locate embark global module path with command below:

whereis embark | awk '{ print $2; }' | sed -e 's/bin\/embark/lib\/node_modules\/embark/g'

Apply patch to embark pipeline

1. Change directory into embark global module.

cd $(whereis embark | awk '{ print $2; }' | sed -e 's/bin\/embark/lib\/node_modules\/embark/g')

2. Copy patch below into patch-pipeline.diff.

diff --git a/lib/pipeline/pipeline.js b/lib/pipeline/pipeline.js
index b84db71..d35dc93 100644
--- a/lib/pipeline/pipeline.js
+++ b/lib/pipeline/pipeline.js
@@ -185,6 +185,7 @@ class Pipeline {
         );
       },
       function removePlaceholderPage(next){
+        if (!placeholderPage) return next();
         let placeholderFile = utils.joinPath(self.buildDir, placeholderPage);
         fs.access(utils.joinPath(self.buildDir, placeholderPage), (err) => {
           if (err) return next(); // index-temp doesn't exist, do nothing

3. Patching file lib/pipeline/pipeline.js

patch -p1 < patch-pipeline.diff

Setup Angular dApp

git clone https://github.com/enten/embark-angular
cd embark-angular
npm install

Run embark

embark run
# or
embark build

Running contracts tests

Run embark test to execute the contracts tests via embark.

Running unit tests

Run npx jest to execute the unit tests via Jest.

Running Storybook

Run npm run storybook to run the Storybook.