Craft a complete GitLab pipeline for Angular. Part 1

[jbardon]

Discussion for Craft a complete GitLab pipeline for Angular. Part 1

[ajitsinghkaler]

Any updates on part-2

[jbardon]

Thanks for your interest 😄
It's in progress, more than half of the work is done 👍

I'll publish it for sure but I can't commit on date sorry.

[zlyuk13]

Would you have a git repo with a complete example? It is failing for me after the build stage ->
yarn run v1.22.5 $ ng build --prod /bin/sh: ng: not found

[jbardon]

In the article, I suggest to use yarn ng instead of ng so the job runs ng-cli from your project.
Here is a complete example mentioned at the end: https://gitlab.com/jbardon/angular-app-pipeline/

[zlyuk13]

Thank you, Jereme! This will be very helpful in the understanding of the topic.

[fvozar]

How would you deal with secrets in environment.*.ts files on build stage? I don't want to keep API tokens in the repository, so instead, I link locally stored environment files before running the build. Is there a way how to achieve this with your approach?

[jbardon]

If you don't bother sharing your secrets with GitLab you can go with GitLab Secrets. Another way can be to store your secrets on a shared network volume all runners have access to. For the second one hosting your own runners might be necessary.

[vmohir]

How would you handle ngcc in a monorepo with a solution-style tsconfig? I'm talking about this warning

Warning: The inferred tsconfig file "/home/vmoh/git_projects/tapsell/dashboard-tapsell/tsconfig.json" appears to be "solution-style" since it contains no root files but does contain project references.
This is probably not wanted, since ngcc is unable to infer settings like "paths" mappings from such a file.
Perhaps you should have explicitly specified one of the referenced projects using the --tsconfig option.

[jbardon]

I didn't experiment Angular in a monorepo. Yet the error message seems to provide a solution by using the --tsconfig option when running ngcc.

Something like: yarn ngcc --properties es2015 --create-ivy-entry-points --tsconfig ./path/to/tsconfig.json.

Don't hesitate to run this command on your local machine to check how it goes. You can also run yarn ngcc --help to get the list of available options and how to use them.

[vmohir]

I tried it with the tsconfig.base.json which contains just some basic tsconfig options without any paths, files, and include options and it's working but as the warning is talking about paths mappings, I was wondering how ngcc is related to paths mappings because AFAIK it's just compiling node_module packages.

[jbardon]

I don't know much about ngcc inner working but with paths in tsconfig.config you can map an import to any directory. It means you can use code which isn't in the project node_modules. Not a good idea for sure, yet it may cover this case to be sure to compile all angular libraries used in the project.

Searching for your issue I find something interesting in this GitHub issue:
ng-packagr/ng-packagr#1754 (comment)

It seems "solution-style" tsconfigdon't exist anymore and a bug was fixed last year. Is your project using a recent version of Angular? If not you can take a look at update.angular.io and let the tooling do the heavy work 👍

[vmohir]

Great information. Thanks for sharing. We're updating the project so I hope the solution-style will also be removed. Even though, running ngcc with tsconfig.base.json seems to be doing the job.

[dragonflypl]

Hi,

Great article :) I have a question about cache. I've created the same install & build_and_test stages. When cache is created in install stage, then when build & test tasks run concurrently, cache is always not available for one of them because a different runner is used (e.g. runner-4qsydtwu-project-2077-concurrent-1, whereas install stage and its step is always using runner-4qsydtwu-project-2077-concurrent-0 runner). How did it work for your project?

[jbardon]

Thanks for your feedback 👍
According to good practices in GitLab documentation:

• only use one runner with specific tag or runner only assigned to your project (not recommended imho)
• only use GitLab runners have autoscale enabled and share cache on Amazon S3 buckets
• only use you own runners and share network mounted directory or S3 buckets (quite easy with autoscale turned on)

At work, we use our own runners with autoscale turned on and S3 buckets, it works fine. Didn't have experience when mixing up GitLab and company runners with S3 caching.

[Nogazzi]

Hi! Great job with that article!
Dida u have strange behaviour with multiple test results in terminal?
In my case it looks like tests were ran three times.
TOTAL: 30 SUCCESS
TOTAL: 30 SUCCESS
TOTAL: 30 SUCCESS

[jbardon]

Hi, thanks for your feedback.
I didn't notice it first but the total is displayed twice in my case (once in green and once in white).
Above the total, I also have one line per test:

[...]
Chrome Headless 81.0.4044.113 (Linux x86_64): Executed 2439 of 2442 SUCCESS (0 secs / 24.012 secs)
Chrome Headless 81.0.4044.113 (Linux x86_64): Executed 2440 of 2442 SUCCESS (0 secs / 24.029 secs)
Chrome Headless 81.0.4044.113 (Linux x86_64): Executed 2441 of 2442 SUCCESS (0 secs / 24.034 secs)
Chrome Headless 81.0.4044.113 (Linux x86_64): Executed 2442 of 2442 SUCCESS (0 secs / 24.038 secs)
Chrome Headless 81.0.4044.113 (Linux x86_64): Executed 2442 of 2442 SUCCESS (31.628 secs / 24.038 secs)
TOTAL: 2442 SUCCESS
TOTAL: 2442 SUCCESS

From the logs and job execution time it looks like the tests only run once. I guess what's displayed in the terminal can differ depending on your Angular and Karma version (Angular 11.2.14 and Karma 6.3.4 in this example).

My assumption is Karma uses some kind of terminal magic to display the number of the current running test (ex: Executed 2439 of 2442) and once the next test is executed it refresh or delete the last line in the terminal so you don't feel flooded with one line per test. It seems to slightly work in GitBash but not always.

Chrome 96.0.4664.93 (Windows 10): Executed 151 of 655 SUCCESS (0 secs / 1.243 secs)
Chrome 96.0.4664.93 (Windows 10): Executed 170 of 655 SUCCESS (0 secs / 1.489 secs)
Chrome 96.0.4664.93 (Windows 10): Executed 171 of 655 SUCCESS (0 secs / 1.495 secs)
Chrome 96.0.4664.93 (Windows 10): Executed 172 of 655 SUCCESS (0 secs / 1.499 secs)
Chrome 96.0.4664.93 (Windows 10): Executed 302 of 655 SUCCESS (0 secs / 1.904 secs)
Chrome 96.0.4664.93 (Windows 10): Executed 398 of 655 SUCCESS (0 secs / 2.108 secs)

It probably works better with other terminals ending with only the last line. The third line for the total you see might be a glitch from this "terminal refresh" behavior which isn't supported in GitLab. Note I have the total displayed twice on GitLab but also on my local machine.

[Nogazzi]

I have one green and two grey logs. This occures in Gitlab and Webstorm terminals.
My versions are 12.2.1 for Angular and 6.3.0 for Karma.
I see that manipulating reporters list has influence on the result logs. I.e. when I remove 'progress', I receive 2 summaries instead of 3. Maybe these reporters are overlaping or I don't know yet, Need more investigation heheh