How to launch frontend in dev mode

[pditommaso]

This is supposed to be a question. Is it possible to launch front-end environment in dev mode so that it's possible to change and quickly reload the page without recompiling all the stuff?

[tcrespog]

Yes it is. The ng serve command starts the application in development mode and detects the changes in the code. Sometimes there are some problems with the change detection, but maybe some of the suggestions of this thread work for you angular/angular-cli#8313.

[pditommaso]

Run running ng serve I get this:

ERROR in ./src/styles.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/styles.scss)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
Error: Node Sass does not yet support your current environment: OS X 64-bit with Unsupported runtime (72)
For more information on which environments are supported please see:
https://github.com/sass/node-sass/releases/tag/v4.11.0
    at module.exports (/Users/pditommaso/Projects/nf-tower/watchtower-gui/node_modules/node-sass/lib/binding.js:13:13)
    at Object.<anonymous> (/Users/pditommaso/Projects/nf-tower/watchtower-gui/node_modules/node-sass/lib/index.js:14:35)
    at Module._compile (internal/modules/cjs/loader.js:774:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:785:10)
    at Module.load (internal/modules/cjs/loader.js:641:32)
    at Function.Module._load (internal/modules/cjs/loader.js:556:12)
    at Module.require (internal/modules/cjs/loader.js:681:19)
    at require (internal/modules/cjs/helpers.js:16:16)

Any advice? maybe I should try to run it via a docker container?

[tcrespog]

What version of NPM do you have? I recommend following this guide to install the required environment https://angular.io/guide/setup-local.

[pditommaso]

I have installed

$ node -v
v12.3.1
$ npm -v 
6.9.0

Angular specifies Node 10.9.0 or later, and I don't see any version for npm. Are developing on Mac?

Also

$ ng -v
Your global Angular CLI version (7.3.9) is greater than your local
version (7.3.8). The local Angular CLI version is used.

[pditommaso]

Trying this sass/node-sass#1764 (comment). I'll let you know.

[pditommaso]

Current status: managed to solve the node modules installation problem upgrading all of them.

npm install -g npm-check-updates
npm-check-updates -u
npm install
npm install typescript@">=3.4.0 <3.5.0" --save-dev --save-exact
npm install

But now Angular fails to compile:

$ ng serve
 
ERROR in src/app/modules/main/component/login/login.component.ts(15,4): error TS2554: Expected 2 arguments, but got 1.
src/app/modules/main/component/user-profile/user-profile.component.ts(16,4): error TS2554: Expected 2 arguments, but got 1.
src/app/modules/main/component/workflow-detail/workflow-detail.component.ts(5,24): error TS2307: Cannot find module '@angular/router/src/shared'.

[tcrespog]

I'm developing on Linux Mint. I have node 10.15.3 and npm 6.4.1. I don't know if that has something to do with the problem you are experiencing.

[tcrespog]

Let me know if you are able to solve it, I would recommend to try with the same versions I posted, but maybe it caused by some other thing.

[pditommaso]

To summarise, the current config fails on Mac. A possible solution requires the update of the install npm componets as shown below:

npm install -g npm-check-updates
npm-check-updates -u

But then compilation fails because the above install angular 8. I needed to create a separate docker-compose environment to enable the angular live deployment. See docker-livedev.yml.

The absence of a minimal architectural document as requested by #11, was a major cause of pain. I needed to reverse engineer all the components and the related config.

[tcrespog]

Mmmm, at the end of the day the Angular config is the out of the box one, I don't really know why it's not working on Mac and I don't have one to test. Well, if it's working fine with your alternative you can roll with that temporarily.

[pditommaso]

When installing the deps one module looks not working on mac and upgrading to the latest version bring Angular 8 that reports some compilation errors. For now, it's fine with the docker env, at some point we should upgrade it and fix the angular compilation error.