Phoenix with angular 4 in dev mode


I’m doing a little POC with phoenix and the last version of angular.
I’m using webpack to compile and bundle the js
It’s working but in DEV mode phoenix take like 50 sec each time to load a page with only a title on it…
While with webpack dev server it take 2-3 sec max.

The JS file in DEV mode is rather large ~8mo but it is loaded quite fast, it just that for whatever reason after the resources are downloaded by the page it still a long time for the page to finish loading.

I have tried in Production mode and it’s extremely fast, although the JS file is down to 1mo max i don’t think that the issue

url of the project:

Anyone tried to put some angular in phoenix or have an idea of what’s going on ?

Your best bet might be the profiler in the browser console. Something that has happened to me before was that pages were ridiculously slow because they attempted to load content from a CDN that was unavailable at the time.

Do not know how you launch it (and did not played with JS setup in Phoenix yet myself), but since there is docker-compose.yml in your project, which mounts current directory into container, I want to remind you about OS X Docker mounting issue

@Qqwy said the ‘browser’ console, so in Chrome you can hit Ctrl+Alt+j to open it for example, about every browser has such a thing now. :slight_smile:

Not sure I can see the relation in your reply :slight_smile:

I had no chance to launch and debug @laurent44’s project, but I saw the Docker files where the author mounts . directory into the container. The Docker has an issue in OS X, when you mount the directory from OS it can be terribly slow. So reading a bunch of node packages, building them and serving can easily take tens of seconds. Maybe by following the @Qqwy’s advice and seeing no CDNs, one can have another guess to check.

Thank you for your answers.

I do use docker to launch the application but from a Windows 10 OS.
As it’s working fine when i’m in production mode or if i use the webpack dev server I don’t think the issue is related to docker.

@Qqwy I use Firefox with the dev tools by default but i would say the problem is more likely on the server side (cowboy)

There is the dockerfile i’m using inside the project too if you want to run it.

@Qqwy was right, it was a probleme with firefox dev tool

I have tried to run the app at work where I use firefox dev edition and I don’t have this issue.

1 Like

Fascinating! So a Firefox bug. What version of Firefox was last showing the issue?

I have the issue with Firefox 52.0.2 (32 bits) when i’m using the devtool: ‘inline-source-map’ from webpack

Work perfectly well with Firefox developer edition 54.0a2 (2017-04-11) (32 bits)

Using the devtool: ‘cheap-module-eval-source-map’ is also a solution

1 Like