[WIP] Setup angular template for embark #2

iamonuwa · 2018-09-15T13:30:37Z

Fixes #1

iurimatias

I did the following and got an error:

embark new angulartest --template iamonuwa/embark-angular-template
cd angulartest
embark run --nodashboard

Error:

./app/main.ts
Module not found: Error: Can't resolve './app/app.module' in '/Users/iurimatias/Projects/tmp/test3/angulartest/app'
resolve './app/app.module' in '/Users/iurimatias/Projects/tmp/test3/angulartest/app'
  using description file: /Users/iurimatias/Projects/tmp/test3/angulartest/package.json (relative path: ./app)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /Users/iurimatias/Projects/tmp/test3/angulartest/package.json (relative path: ./app/app/app.module)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /Users/iurimatias/Projects/tmp/test3/angulartest/app/app/app.module doesn't exist
      .wasm
        Field 'browser' doesn't contain a valid alias configuration
        /Users/iurimatias/Projects/tmp/test3/angulartest/app/app/app.module.wasm doesn't exist
      .mjs
        Field 'browser' doesn't contain a valid alias configuration
        /Users/iurimatias/Projects/tmp/test3/angulartest/app/app/app.module.mjs doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /Users/iurimatias/Projects/tmp/test3/angulartest/app/app/app.module.js doesn't exist
      .json
        Field 'browser' doesn't contain a valid alias configuration
        /Users/iurimatias/Projects/tmp/test3/angulartest/app/app/app.module.json doesn't exist
      as directory
        /Users/iurimatias/Projects/tmp/test3/angulartest/app/app/app.module doesn't exist
[/Users/iurimatias/Projects/tmp/test3/angulartest/app/app/app.module]
[/Users/iurimatias/Projects/tmp/test3/angulartest/app/app/app.module.wasm]
[/Users/iurimatias/Projects/tmp/test3/angulartest/app/app/app.module.mjs]
[/Users/iurimatias/Projects/tmp/test3/angulartest/app/app/app.module.js]
[/Users/iurimatias/Projects/tmp/test3/angulartest/app/app/app.module.json]
 @ ./app/main.ts 3:0-45 10:41-50
 @ multi ./app/main.ts
./app/main.ts
Module not found: Error: Can't resolve './environments/environment' in '/Users/iurimatias/Projects/tmp/test3/angulartest/app'
resolve './environments/environment' in '/Users/iurimatias/Projects/tmp/test3/angulartest/app'
  using description file: /Users/iurimatias/Projects/tmp/test3/angulartest/package.json (relative path: ./app)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /Users/iurimatias/Projects/tmp/test3/angulartest/package.json (relative path: ./app/environments/environment)

iamonuwa · 2018-09-19T15:30:11Z

@iurimatias thank you for the review. I'll fix this issue

0x-r4bbit · 2018-09-20T09:25:06Z

@iamonuwa @iurimatias just as an FYI:

Turns out this is also an issue in embark-typescript-template. I'm not very experienced with Webpack but this may be related to the template using babel-loader instead of ts-loader.

@iamonuwa let us know how it goes!

0x-r4bbit · 2018-09-20T11:23:15Z

For reference, I created embarklabs/embark-typescript-template#2

@iamonuwa if you get this fixed, you eliminate two issues in one go! :)

iamonuwa · 2018-09-20T19:13:09Z

@PascalPrecht can we use gitter to chat? Shoot me a message there. @iamonuwa

iamonuwa · 2018-09-20T19:15:51Z

I'll use babel-loader inside the webpack.config.js to work on this.

0x-r4bbit · 2018-09-20T20:40:23Z

@iamonuwa sorry it's late here so I'll have to keep it short. Could you actually reproduce the issue or did the compilation work for you?

We noticed that this may only occur in embark versions <= 3.2.x, so if you're working with the latest stable release, it might be possible those errors don't show up for you.

The reason for that is because in 3.2.x, embark uses the webpack config from your dapp as supposed to its internal one. However if it does work with 3.1.x (I'm gonna verify this tomorrow morning), then this could be a good pointer for where to start looking!

iamonuwa · 2018-09-21T11:41:30Z

@PascalPrecht you are right. Am finding it difficult to reproduce the error on 3.1.x

iamonuwa · 2018-09-21T12:00:55Z

@iurimatias this is my terminal embark version 3.2.0-develop

Cannot reproduce the error as well.

0x-r4bbit · 2018-09-21T12:02:29Z

Oh that's a different error indeed. Can you remove .embark/ebark.ipc and try again?

iamonuwa · 2018-09-21T12:05:58Z

@PascalPrecht I don't have .embark directory

0x-r4bbit · 2018-09-21T12:08:23Z

Hm.. your output says though that it listens to angulartest/.embark/embark.ipc

Can you verify once more please?

iamonuwa · 2018-09-21T12:10:43Z

@PascalPrecht just saw that, was looking at the my computer root directory

0x-r4bbit · 2018-09-21T12:11:43Z

Yes, sorry for not being too clear about that!

iamonuwa · 2018-09-21T12:13:16Z

Yeah, I guess the fault should be from me.
I got a new computer. Need to add ipfs first and try again

iamonuwa · 2018-09-21T12:19:37Z

@PascalPrecht still same error. I cannot reproduce @iurimatias error locally

0x-r4bbit · 2018-09-21T12:21:30Z

Okay, this is a different thing then. Can you scaffold a dapp newly with your template and embark being on 3.2.0-develop?

iamonuwa · 2018-09-21T12:23:07Z

@PascalPrecht, if I get you correctly, you need me to setup a new dApp with the requirements specified on the bounty?

0x-r4bbit · 2018-09-21T12:28:49Z

Oh sorry, what I meant was doing the exact steps that @iurimatias did here #2 (review)

Remember that you've done your work on 3.1.x so to reproduce this it'd help to scaffold a new app using your template while using embark 3.2.x.

Does that help?

0x-r4bbit · 2018-09-21T12:31:55Z

I've also just noticed that 3.1.10 (latest official release) doesn't actually come with a --template option yet. So this is a 3.2.x feature and should probably be implemented based on 3.2.x

iamonuwa · 2018-09-21T20:24:06Z

@PascalPrecht ATM, I still can't reproduce that error.

iurimatias · 2018-09-24T21:19:41Z

@iamonuwa I was able to get past the error I reported by using .ts for e.g import { AppModule } from './app/app.module.ts';

then it breaks with this instead, which is something that needs changes to the template as part of the PR:

./app/app/app.module.ts
Module build failed (from /Users/iurimatias/Projects/Status/embark/node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/iurimatias/Projects/Status/tmp2/AngularTemplate/app/app/app.module.ts: Support for the experimental syntax 'decorators-legacy' isn't currently enabled (6:1):

  4 | import { AppComponent } from './app.component';
  5 |
> 6 | @NgModule({
    | ^
  7 |   imports: [
```

The screenshot you put above, seems to indicate you don't `geth` installed, is that the case?

iamonuwa · 2018-09-24T22:08:24Z

@iurimatias I'll look at it again

0x-r4bbit · 2018-09-25T08:12:04Z

@iamonuwa this option should get you there! https://www.typescriptlang.org/docs/handbook/decorators.html

:)

michaelsbradleyjr · 2018-09-26T19:14:46Z

The module imports problem can likely be fixed by implementing the same changes to webpack.config.js as made for the typescript template:

embarklabs/embark-typescript-template#3

iamonuwa · 2018-09-29T09:58:23Z

@PascalPrecht @iurimatias please review

0x-r4bbit

Hey @iamonuwa

thanks for the update and we're getting there! I ran your branch locally and it turns out that stuff is still in flux. Did you actually tried running this to see whether things are working?

Here are some pointers:

@babel/plugin-proposal-decorators is missing as a module, making it impossble to run embark run
The patch applied to base.resolve.extensions needs to happen earlier in the config algorithm. If you try running the template the way it is right now, you'll notice that we still run into module resolution errors
Having all the above fixed, the code will compile, however at runtime it doesn't look as bright yet. It seems like Angular isn't bootstrapping. Again, please verify that you changes are working :)

Apart from that I left some minor comments inline for help and guidance.

0x-r4bbit · 2018-10-01T09:18:09Z

app/main.ts

+import { environment } from './environments/environment';
+if (environment.production) {
+    enableProdMode();
+  }


It looks like we have some wrong indentation here.

Sorry, I'm not sure I follow.. but maybe I wasn't clear enough. I wanted to point out that there's some wrong formatting, the } being indented, which probably shouldn't be.

0x-r4bbit · 2018-10-01T09:19:05Z

app/vendor.ts

@@ -0,0 +1,3 @@
+import '@angular/platform-browser';
+import '@angular/platform-browser-dynamic';
+import '@angular/core';


I believe this file isn't needed. It doesn't seem to be imported anywhere. Can you verify this @iamonuwa ?

0x-r4bbit · 2018-10-01T09:20:03Z

webpack.config.js

-            ]
+            ],
+            [
+              '@babel/plugin-proposal-decorators', { 


Running this code will result in an error that @babel/plugin-proposal-decorators is missing.

This needs to be added to package.json

0x-r4bbit · 2018-10-01T09:21:42Z

webpack.config.js

+  '.wasm', '.mjs', '.js', '.json',
+  // typescript extensions
+  '.ts', '.tsx'
+];


Defining those extensions here actually won't take any effect as base is being used before it gets extended here. Please ensure it's base is in shape before it's used for creating dev and prod environments.

iurimatias · 2018-10-07T14:01:26Z

@iamonuwa any updates? we're looking forward for this template

iamonuwa · 2018-10-10T14:29:44Z

@iurimatias I can't reproduce this error. Seems like I'll stop work if its urgent

0x-r4bbit · 2018-10-10T15:18:44Z

@iamonuwa not urgent! :)

But we'd like to get your changes in. Unfortunately, we need to make sure that everything works first. Did you test this template locally and got a working app running with this code?

If yes, can you provide steps on how to reproduce this? Because I'm unable to make this work.

Thanks @iamonuwa !

iamonuwa · 2018-10-11T07:43:24Z

Great @PascalPrecht. I'll do a video recording today

0x-r4bbit · 2018-10-11T14:43:04Z

@iamonuwa Looking forward to it!

frankchen07 · 2018-11-23T17:17:21Z

@iamonuwa - Frank from Gitcoin here, is there any followup on this PR?

Setup angup angular template for embark

ca05c89

iamonuwa mentioned this pull request Sep 15, 2018

Angular Template for Embark #1

Open

iurimatias requested a review from a team September 15, 2018 17:16

iurimatias requested changes Sep 18, 2018

View reviewed changes

0x-r4bbit mentioned this pull request Sep 25, 2018

Module imports are not working embarklabs/embark-typescript-template#2

Closed

Fix decorators-legacy issue

5f9369d

0x-r4bbit suggested changes Oct 1, 2018

View reviewed changes

[WIP] Setup angular template for embark #2

Are you sure you want to change the base?

[WIP] Setup angular template for embark #2

Conversation

iamonuwa commented Sep 15, 2018 • edited Loading

iurimatias left a comment

Choose a reason for hiding this comment

iamonuwa commented Sep 19, 2018

0x-r4bbit commented Sep 20, 2018 • edited Loading

0x-r4bbit commented Sep 20, 2018

iamonuwa commented Sep 20, 2018

iamonuwa commented Sep 20, 2018

0x-r4bbit commented Sep 20, 2018 • edited Loading

iamonuwa commented Sep 21, 2018

iamonuwa commented Sep 21, 2018

0x-r4bbit commented Sep 21, 2018

iamonuwa commented Sep 21, 2018

0x-r4bbit commented Sep 21, 2018 • edited Loading

iamonuwa commented Sep 21, 2018

0x-r4bbit commented Sep 21, 2018

iamonuwa commented Sep 21, 2018

iamonuwa commented Sep 21, 2018

0x-r4bbit commented Sep 21, 2018

iamonuwa commented Sep 21, 2018

0x-r4bbit commented Sep 21, 2018

0x-r4bbit commented Sep 21, 2018

iamonuwa commented Sep 21, 2018

iurimatias commented Sep 24, 2018

iamonuwa commented Sep 24, 2018

0x-r4bbit commented Sep 25, 2018

michaelsbradleyjr commented Sep 26, 2018

iamonuwa commented Sep 29, 2018

0x-r4bbit left a comment

Choose a reason for hiding this comment

0x-r4bbit Oct 1, 2018

Choose a reason for hiding this comment

iamonuwa Oct 1, 2018

Choose a reason for hiding this comment

0x-r4bbit Oct 1, 2018

Choose a reason for hiding this comment

0x-r4bbit Oct 1, 2018

Choose a reason for hiding this comment

0x-r4bbit Oct 1, 2018

Choose a reason for hiding this comment

0x-r4bbit Oct 1, 2018

Choose a reason for hiding this comment

iurimatias commented Oct 7, 2018

iamonuwa commented Oct 10, 2018

0x-r4bbit commented Oct 10, 2018

iamonuwa commented Oct 11, 2018

0x-r4bbit commented Oct 11, 2018

frankchen07 commented Nov 23, 2018

iamonuwa commented Sep 15, 2018 •

edited

Loading

0x-r4bbit commented Sep 20, 2018 •

edited

Loading

0x-r4bbit commented Sep 20, 2018 •

edited

Loading

0x-r4bbit commented Sep 21, 2018 •

edited

Loading