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

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.

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.

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

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.

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'

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

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

embark run
# or
embark build

Run embark test to execute the contracts tests via embark.

Run npx jest to execute the unit tests via Jest.

Run npm run storybook to run the Storybook.