Angular Decentralized Application with Embark
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.storybook
config
contracts
e2e
src
test
.editorconfig
.gitignore
LICENSE
README.md
angular.json
embark.json
package.json
tsconfig.json
tslint.json
webpack.config.builder.js
webpack.config.js

README.md

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')
  1. 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
  1. 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.