How are you guys developing with Angular right now?

Hi guys,

I'm curious about the development processes of those of you using Angular. 

The starting point is that, somewhere, there lives an Angular project full of (mostly) typescript files.  Eventually, those files need to be built, and the resulting built files served up to a browser.

Given that, let's say I want to go change one of the typescript files.  What are some clean ways to, during development, see that change reflected on the active webpage in the development environment.  For something like a .cls or .csp file, after you save and compile a changed file in Studio/Atelier, the IDE handles that entire build process for you, and from the developer's perspective it's just: compile, reload the webpage, and your changes are there.

My initial thought is to point the "csp files physical path" of a web application to the directory where I have ng build put the resulting 7 files from the build.  Then, a call to [cname of server]/web app name/index.html will get you to the app (and at some point redirect simpler URL's to here).  I could write a script (which could later be translated into some Studio/Atelier UI component) which navigates to the ng project in the remote workspace, then builds the files (directing the build output to wherever the web application is looking).   The developer would need to save their changes, then run this script in order to see their changes reflected on the environment's webpage.

An inconvenience during this process is that the src imports in index.html need to be prepended with the webapp's name.  Lines like this:

</script><script type="text/javascript" src="polyfills.js">

need to be replaced with:

</script><script type="text/javascript" src="[web app name]/polyfills.js">

in order for it to actually find the polyfills.js file it's looking for.  It's not super difficult to write a quick program to do this replace after a build, but there might be a cleaner solution I'm missing.

So let me know what you guys are doing for development and deployment with Angular.  Is it similar?  Totally different?  Are there assumptions I'm making you'd recommend against?

Also, how are you guys handling package management?  Do you source control node_modules?  How often/where do you run your npm install commands?

All input is very appreciated :)

  • + 3
  • 1
  • 112
  • 3
  • 2

Answers

Hello!

I can share my experience with Angular project building process with Caché/IRIS.
I will split it in two cases:

  1. The project has custom auth and can be used like non-CSP application. The only Caché part is REST API.
    In this case, you would like to use ng serve command instead of ng build during development. It will run your app on Express Server and recompile it automatically after each change (it will rebuild only necessary files). It usually runs on localhost:4200 address, so the only thing you will need to do is to specify your Caché server address with a proxy so the app will able to reach it.
    To achieve that you will need to run ng serve --proxy-config proxy.conf.json. Your proxy.conf.json should look like this:
{
    "/your_app_name": {
        "target": "http://localhost:57772",
        "secure": false
    }
}

Here is the docs from Angular CLI: https://github.com/angular/angular-cli/blob/d22e9ae73763923980fc1e59cfb2...

After your development is complete, you can use ng build and then deploy your app as usual.

  1. The project uses Caché Authentication, Session and can exist only like CSP-app.
    In this case, you will need to build your project every time you change something, which can be slower than ng serve.
    I would use ng build --output-path dist --watch command where dist is your output directory. Then you be able to build directly into the CSP-app folder from your development directory and project will be rebuilt every time you change something because of --watch

An inconvenience during this process is that the src imports in index.html need to be prepended with the web app's name.

It should not be prepended if base-href is properly specified.
This is how you could achive it:
1. Rename all the .html files in the project to .csp files (e.g. index.csp and login.csp)
2. Use --base-href option in build command:

ng build --aot --base-href=/csp/my_app/index.csp for development build
ng build --aot --base-href=/csp/my_app/index.csp --prod for production build

Where /csp/my_app/index.csp is path to your csp-app's index.csp on the Caché server (full URL in the browser will be something like localhost:57772/csp/my_app/index.csp)

/csp/my_app/ is the CSP-app where you deploy your app with index.cspin root of the folder specified as CSP Files Physical Path

During development, you would also like to set Serve Files option of CSP-app to Always value to avoid CSP Gateway Cache (it sometimes serves old cached files even if files in CSP-folder already have been updated).

Please, let me know if you will have some difficulties with the information above. Maybe it deserves a better explanation and a separate post with demo application with source code.

Ah, using base-href is a great idea, thanks.  A few questions about this:

Why did you rename the files to .csp?

Why are you using ahead of time compilation?

By using:

ng build --base-href = /webapp_name/index.html

I was able to access <cname>/webapp_name/index.html successfully; the index.html file could find the scripts like polyfills.js without me modifying those src arguments by hand.

Why did you rename the files to .csp?

I only use it in the case when my app's files go through CSP-Gateway. There are some differences between how .csp and .html files served through CSP-Gateway.
Here's more info: https://irisdocs.intersystems.com/irislatest/csp/docbook/DocBook.UI.Page...

.html files will be served as static files with BOM that potentially can break your files if there is no BOM in them. Or you will need to additionally configure a web server to avoid it.

Why are you using ahead of time compilation?

It compiles (Angular-like components to actual HTML/JS code) Angular application before it actually served to the client. So the client doesn't need to spend time and resources to compile it each time (https://angular.io/guide/aot-compiler).

Some time ago I did an example of Angular Application with IRIS on a backend.

Source for this project available on gitlab.

How to develop Angular application, you should look at angular documentation, and all about frontend development. There are some tools, which helps to develop and build your frontend side. Such as webpack, which do most of work related with build your sources to  production ready environment.

In my simple project, you need only docker, and any editor, preferable VSCode.

By command,  you will get a running server in development mode. So, you can edit Angular code, and IRIS code, and see an immediate result.

docker-compose up -d

And this project also deployable with Kubernetes. So, after any push of changes to gitlab, it will build, and test it.

 

node_modules, never goes to source control. It's enough to have package.json and package-lock.json there. node_modules may contain platform specific libraries.

 

Hope I will manage to write a complete article about this project, with all the details.