Skip to content

Commit 5cdb4d1

Browse files
annkotsannkots
authored
Merge pull request #203 from sboldyreva/angular19
Add Angular19 steps and dependencies
2 parents ffe3510 + de8979f commit 5cdb4d1

File tree

1 file changed

+149
-29
lines changed
  • docs/els-for-runtimes-and-libraries/angular

1 file changed

+149
-29
lines changed

‎docs/els-for-runtimes-and-libraries/angular/README.md‎

Lines changed: 149 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,7 @@ Angular versions 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, and 19 ar
1313
## Connection to ELS for Angular Repository
1414

1515
Please contact [[email protected]](mailto:[email protected]) for instructions.
16-
17-
<!--
16+
1817
This guide outlines the steps needed to integrate the TuxCare ELS for Angular repository.
1918

2019
## Step 1: Get user credentials
@@ -28,35 +27,67 @@ TuxCare provides ELS for Angular as an NPM package, hosted on a secure internal
2827
1. Navigate to the root directory of your Angular project.
2928
2. Create a `.npmrc` file or update it if it already exists.
3029

31-
**Example:**
30+
**Example:**
3231

33-
```text
34-
my-angular-project/
35-
├── src/
36-
├── angular.json
37-
├── package.json
38-
├── .npmrc ⚠️ ← Create it here
39-
└── tsconfig.json
40-
```
32+
```text
33+
my-angular-project/
34+
├── src/
35+
├── angular.json
36+
├── package.json
37+
├── .npmrc ⚠️ ← Create it here
38+
└── tsconfig.json
39+
```
4140

4241
3. Use an editor of your choice (e.g., VS Code) to add the following registry address line:
4342

44-
<CodeWithCopy>
43+
<CodeWithCopy>
4544

46-
```text
47-
registry=https://registry.npmjs.org/
48-
@els-js:registry=https://nexus.repo.tuxcare.com/repository/els-js/
49-
//nexus.repo.tuxcare.com/repository/els-js/:_auth=${TOKEN}
50-
```
45+
```text
46+
registry=https://registry.npmjs.org/
47+
@els-js:registry=https://nexus.repo.tuxcare.com/repository/els_js/
48+
//nexus.repo.tuxcare.com/repository/els_js/:_auth=${TOKEN}
49+
```
5150

52-
</CodeWithCopy>
51+
</CodeWithCopy>
5352

5453
:::warning
5554
Replace ${TOKEN} with the token you received from [[email protected]](mailto:[email protected]).
5655
:::
5756

5857
4. Update your `package.json` file to replace your Angular dependencies with the TuxCare packages.
5958

59+
<TableTabs label="Choose Angular version: " >
60+
<template #Angular_19>
61+
62+
:::tip
63+
Use "SSR ON" if your project is configured with Server-Side Rendering, otherwise use "SSR OFF".
64+
65+
To check whether your Angular project is configured with Server-Side Rendering, look for `@angular/ssr` listed in your original `package.json` file before replacing dependencies. If you see `@angular/ssr` listed, **SSR is ON**, otherwise **SSR is OFF**.
66+
:::
67+
68+
<CodeTabs :tabs="[
69+
{ title: 'SSR ON', content: Angular19WithSSR },
70+
{ title: 'SSR OFF', content: Angular19WithoutSSR }
71+
]" />
72+
73+
:::tip
74+
If you use any of the following **non-default Angular modules**, update their versions as shown below:
75+
76+
* "@angular/animations": "npm:@els-js/[email protected]",
77+
* "@angular/elements": "npm:@els-js/[email protected]",
78+
* "@angular/language-service": "npm:@els-js/[email protected]",
79+
* "@angular/localize": "npm:@els-js/[email protected]",
80+
* "@angular/upgrade": "npm:@els-js/[email protected]",
81+
* "@angular/platform-server": "npm:@els-js/[email protected]",
82+
* "@angular/service-worker": "npm:@els-js/[email protected]",
83+
84+
After adding these aliases, make sure the same modules are also listed in the `overrides` section, just like the default ones.
85+
:::
86+
</template>
87+
</TableTabs>
88+
89+
90+
<!--
6091
**Angular 12**
6192
<details>
6293
<summary>Click to expand</summary>
@@ -338,24 +369,113 @@ TuxCare provides ELS for Angular as an NPM package, hosted on a secure internal
338369
339370
</details>
340371
372+
-->
373+
341374
5. In your terminal, run the following command to install ELS for Angular:
342375

343-
<CodeWithCopy>
376+
<CodeWithCopy>
344377

345-
```text
346-
npm install --userconfig .npmrc
347-
```
378+
```text
379+
npm install --userconfig .npmrc
380+
```
348381

349-
</CodeWithCopy>
382+
</CodeWithCopy>
350383

351-
You will see an output like:
384+
You will see an output like:
352385

353-
```text
354-
added 12 packages, removed 931 packages, changed 22 packages, and audited 57 packages in 23s
386+
```text
387+
added 4 packages, changed 9 packages, and audited 945 packages in 3s
355388
356-
found 0 vulnerabilities
357-
```
389+
162 packages are looking for funding
390+
run `npm fund` for details
391+
392+
found 0 vulnerabilities
393+
```
358394

359395
6. You've successfully integrated the TuxCare ELS for Angular repository into your project.
360396

361-
-->
397+
<script setup>
398+
const Angular19WithSSR =
399+
`"dependencies": {
400+
"@angular/common": "npm:@els-js/[email protected]",
401+
"@angular/compiler": "npm:@els-js/[email protected]",
402+
"@angular/core": "npm:@els-js/[email protected]",
403+
"@angular/forms": "npm:@els-js/[email protected]",
404+
"@angular/platform-browser": "npm:@els-js/[email protected]",
405+
"@angular/platform-browser-dynamic": "npm:@els-js/[email protected]",
406+
"@angular/platform-server": "npm:@els-js/[email protected]",
407+
"@angular/router": "npm:@els-js/[email protected]",
408+
"@angular/ssr": "^19.2.15",
409+
"express": "^4.18.2",
410+
"rxjs": "~7.8.0",
411+
"tslib": "^2.3.0",
412+
"zone.js": "~0.15.0"
413+
},
414+
"devDependencies": {
415+
"@angular-devkit/build-angular": "^19.2.15",
416+
"@angular/cli": "^19.2.15",
417+
"@angular/compiler-cli": "npm:@els-js/[email protected]",
418+
"@types/express": "^4.17.17",
419+
"@types/jasmine": "~5.1.0",
420+
"@types/node": "^18.18.0",
421+
"jasmine-core": "~5.6.0",
422+
"karma": "~6.4.0",
423+
"karma-chrome-launcher": "~3.2.0",
424+
"karma-coverage": "~2.2.0",
425+
"karma-jasmine": "~5.1.0",
426+
"karma-jasmine-html-reporter": "~2.1.0",
427+
"typescript": "~5.7.2"
428+
},
429+
"overrides": {
430+
"@angular/common": "npm:@els-js/[email protected]",
431+
"@angular/compiler": "npm:@els-js/[email protected]",
432+
"@angular/core": "npm:@els-js/[email protected]",
433+
"@angular/forms": "npm:@els-js/[email protected]",
434+
"@angular/platform-browser": "npm:@els-js/[email protected]",
435+
"@angular/platform-browser-dynamic": "npm:@els-js/[email protected]",
436+
"@angular/platform-server": "npm:@els-js/[email protected]",
437+
"@angular/router": "npm:@els-js/[email protected]",
438+
"@angular/compiler-cli": "npm:@els-js/[email protected]",
439+
"@angular/localize": "npm:@els-js/[email protected]",
440+
"@angular/service-worker": "npm:@els-js/[email protected]"
441+
}`
442+
443+
const Angular19WithoutSSR =
444+
`"dependencies": {
445+
"@angular/common": "npm:@els-js/[email protected]",
446+
"@angular/compiler": "npm:@els-js/[email protected]",
447+
"@angular/core": "npm:@els-js/[email protected]",
448+
"@angular/forms": "npm:@els-js/[email protected]",
449+
"@angular/platform-browser": "npm:@els-js/[email protected]",
450+
"@angular/platform-browser-dynamic": "npm:@els-js/[email protected]",
451+
"@angular/router": "npm:@els-js/[email protected]",
452+
"rxjs": "~7.8.0",
453+
"tslib": "^2.3.0",
454+
"zone.js": "~0.15.0"
455+
},
456+
"devDependencies": {
457+
"@angular-devkit/build-angular": "^19.2.15",
458+
"@angular/cli": "^19.2.15",
459+
"@angular/compiler-cli": "npm:@els-js/[email protected]",
460+
"@types/jasmine": "~5.1.0",
461+
"jasmine-core": "~5.6.0",
462+
"karma": "~6.4.0",
463+
"karma-chrome-launcher": "~3.2.0",
464+
"karma-coverage": "~2.2.0",
465+
"karma-jasmine": "~5.1.0",
466+
"karma-jasmine-html-reporter": "~2.1.0",
467+
"typescript": "~5.7.2"
468+
},
469+
"overrides": {
470+
"@angular/common": "npm:@els-js/[email protected]",
471+
"@angular/compiler": "npm:@els-js/[email protected]",
472+
"@angular/core": "npm:@els-js/[email protected]",
473+
"@angular/forms": "npm:@els-js/[email protected]",
474+
"@angular/platform-browser": "npm:@els-js/[email protected]",
475+
"@angular/platform-browser-dynamic": "npm:@els-js/[email protected]",
476+
"@angular/router": "npm:@els-js/[email protected]",
477+
"@angular/platform-server": "npm:@els-js/[email protected]",
478+
"@angular/service-worker": "npm:@els-js/[email protected]",
479+
"@angular/compiler-cli": "npm:@els-js/[email protected]"
480+
}`
481+
</script>

0 commit comments

Comments
 (0)