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
  • 386
  • 9
  • 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).

Hi,

In reading this - I'm wondering - what is the real advantage of #2 ?   

- Steve

Steve - #2 is helpful if you want to leverage existing structures for authentication, auditing, transport or other functions that rely on CSP sessions .  This can be used as part of a strategy of incrementally moving an application from a CSP-based architecture to Angular. 

Hi Sergey,

Thanks for these steps. I'm trying this with Angular 7 as its component architecture really saves my time to learn. 

Yet as I want to migrate the project into a CSP application, I get lost at some points. For simplicity, let me start with a new angular project "my-app" which is created by the "ng new" command and can be run successfully by "ng serve". Up to here, it means to me I have already done Step (1). 

Now I go to Step (2). I defined my CSP application path "/my-app". Then in my "ng build" command, specify the --output-path to that CSP application physical directory. Then I modify every occurrence of the src import in index.html with the "/my-app/" prepended.

Then I test the the URL of index.html in the browser.  But the page is not loaded. It is not a 404. It is just a blank page.

Do you see anything I have missed out or gone incorrectly?

Hi Joseph!

At first, may I ask you why do you like to migrate your project into a CSP app? I guess you want to use builtin CSP-authentication?

Now I go to Step (2). I defined my CSP application path "/my-app". Then in my "ng build" command, specify the --output-path to that CSP application physical directory. Then I modify every occurrence of the src import in index.html with the "/my-app/" prepended.

This is exactly what my answer was about. You should not modify src imports by hand but use --base-href option instead.

But the page is not loaded. It is not a 404. It is just a blank page.

Could you share the Console/Network tabs output from your browser's Developer Tools? It will help me to better understand what happens.

Thanks for your help, Sergey.

This is the screenshot of the Console.

And this is of the Network.

Hi Joseph!
Sorry for such delay, I experienced some issues with login in Community.

Such error in the console usually says that it can't parse some content in the specified file. As I see in the filename, your target build is ES2015 and problem in the build process of the code of 3rd-party libraries.  What I would try to do in this case is set property "target" in tsconfig.ts file to "es5", rebuild the app and see that problem will go or not. 

Another option you can try is to find out where exactly the problem is. You can click on the error in the console and it should show you the place in the code where code parsing/execution failed. Probably, then we will able to understand what went wrong.

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.