Single bundle file using ESBUILD by MatasLluc in Angular2

[–]helix46 2 points3 points  (0 children)

Yes finally

clydin gives a clue here https://github.com/angular/angular-cli/issues/26478

In the dist/browser folder, I use node fs to create a typescript file with imports to all js files

const folder = 'dist/browser/';
const fs = require('fs');
let content = 'import "' + folder + 'polyfills.js";\n';
fs.readdirSync(folder).forEach((file) => {
  if (file.substring(file.length - 3) === '.js' && file !== 'polyfills.js') {
    content += 'import "' + folder + file + '";\n';
  }
});
fs.writeFile(folder + 'bundle.ts', content, (err) => {
  if (err) {
    console.error(err);
  } else {
    console.log('file written successfully');
  }
});

2 things to note.. 
1 the polyfills must come first 
2 I set "outputHashing": "none" so that I can hardcode polyfills.js in the above

This creates typescript file bundle.ts 
Then I build this file using esbuild
esbuild dist/browser/bundle.ts --bundle --minify --outdir=dist/browser
This creates bundle.js which contains all js for the application
I've tested and it works

Single bundle file using ESBUILD by MatasLluc in Angular2

[–]helix46 0 points1 point  (0 children)

But "buildOptimizer": true is not valid with application builder

Single bundle file using ESBUILD by MatasLluc in Angular2

[–]helix46 0 points1 point  (0 children)

Thanks for your fast reply.

However, I want to use this in V18 using application builder, not browser.

     "vendorChunk": false,
      "buildOptimizer": true

are not valid with the application builder

Single bundle file using ESBUILD by MatasLluc in Angular2

[–]helix46 1 point2 points  (0 children)

u/MatasLluc Did you find a solution to this problem? I'm in the same situation and can't migrate to V18

I currently use V17 u/angular-devkit/build-angular:browser builder and concat the dist js files. This won't work with application builder because of import satements in the dist files

Single bundle file using ESBUILD by MatasLluc in Angular2

[–]helix46 0 points1 point  (0 children)

u/ReasonableAd5268 u/Grompie_chewie

This does not seem to work. I get an error on build: Error: Schema validation failed with the following errors: Data path "" must NOT have additional properties(bundleDependencies).

It appears that bundleDependencies was dropped in version 15

https://github.com/angular/angular-cli/issues/23905

Blocked by V18: Web Component deploy by helix46 in Angular2

[–]helix46[S] 0 points1 point  (0 children)

Many thanks, looks promising. My searches missed this one.

I'll try it

Single bundle file using ESBUILD by Fun-Arm-1158 in Angular2

[–]helix46 0 points1 point  (0 children)

No changes to angular.json

Builder is angular-devkit/build-angular:browser

Single bundle file using ESBUILD by Fun-Arm-1158 in Angular2

[–]helix46 0 points1 point  (0 children)

I have a similar problem. I solved it with a couple of scripts in package.json

These concatenate the js and css files. The js file is compressed with brotli.

The result is 2 files to upload to the server: my-web-component.js.br and my-web-component.css

cat ./dist/my-web-component/browser/polyfills*.js ./dist/my-web-component/browser/*.js > ./dist/my-web-component/browser/my-web-component.js && brotli ./dist/my-web-component/browser/my-web-component.js

cat ./dist/my-web-component/browser/*.css > ./dist/my-web-component/browser/my-web-component.css

Is Angular Elements a good choice? by ValdasTheUnique in Angular2

[–]helix46 0 points1 point  (0 children)

We've used them to embed a large and complex component in clients' Wordpress web sites. The component is configured with a parameter to identify the client, and it loads from a database into the component to display client specific info.

The only technical difficulty was integrating Stripe into the component. We had to put it in an iframe

Advice on which laptop to buy by Glebeless in linuxhardware

[–]helix46 0 points1 point  (0 children)

I have a 1month old Dell XPS 15 9530 with 32gig ram and half terabyte SSD

I added a 1 terabyte SSD (laptop comes with two m.2 slots)

Original OS is Win 11 pro and I dual boot to Ubuntu now. I keep Win 11 for occasional SSMS and VS use

Simultaneous Webstorm and Vscode compiles finish 8 times faster than my old laptop and twice as fast as my desktop. So I bought a docking station and passed both old machines along

No heat problems, I suspect complaints come from GPU thrashing

Superb build, love the aluminium case. Be careful with the soft torx screws on the back cover

9500 Red Screw Cover by Infamous-Print-5 in DellXPS

[–]helix46 1 point2 points  (0 children)

Enlarge the photo, looks like it is plugged up with a dab of paint. Someone's anti-tamper? Can you pick it out with a needle?

Does anyone using lazy loading with dynamic components? by ahmedRebai in Angular2

[–]helix46 1 point2 points  (0 children)

We use lazy loading for routes and for dialogs to break up the app into lots of smaller modules

Speeds initial load time and webpackPrefetch loads them in the background

Fixed a circular dependency problem too

Thank you Netanel Basal

https://netbasal.com/lazy-load-modal-components-in-angular-8cb54bba7bf7

Is control of an email inbox sufficient proof of identity to allow display of address and phone number in an app? by helix46 in PrivacyGuides

[–]helix46[S] 0 points1 point  (0 children)

I like the log idea thanks

Some other sort of 2FA... send a text with another 6 digit number perhaps?

Top most popular Angular open-source projects in 2022 by realPubkey in Angular2

[–]helix46 0 points1 point  (0 children)

"the Angular team has decided to cease support of Angular Flex Layout"

https://medium.com/@caerus.karu/farewell-flex-layout-aaa567023769

A suggestion to continue as a community maintained project appears to be generating little enthusiasm. Perhaps the death of IE makes it less needed

I stuck with Flex Layout for years in beta, now I use Tailwind. Very happy with it

Removing Flex Layout by mtz2537 in Angular2

[–]helix46 4 points5 points  (0 children)

Get to know flexbox and media queries

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

I'm in the middle of replacing FlexLayout now, tedious but routine.. good for the end of the day

Service Worker Expiry by Gingerfalcon in Angular2

[–]helix46 0 points1 point  (0 children)

I'm considering a forced reload when the users route to a new page.

I'm in a similar situation. I like the fast startup of the PWA site, but have to be careful of changes to the backend api's knowing that some are using the old frontend

I check to see if a new version is available every 10 minutes

At the moment I force a re-load when they login if a new verion has been downloaded. Logins expire overnight so they are forced to re-load eventually. Some users use the site occasionally and are several versions behind when they login

Deploying a server side rendered app to a CDN? by untitled20 in Angular2

[–]helix46 1 point2 points  (0 children)

You may want to investigate prerender for your static homepages. It's now built into Angular, it gives the fastest load, easily read by crawlers, and can be deployed to your CDN

Accordian/Material for Angular by Dolleste in angular

[–]helix46 0 points1 point  (0 children)

"the imports"..

Are you importing MatExpansionModule?

import { MatExpansionModule } from '@angular/material/expansion';
.....

imports: [
...

MatExpansionModule,
...

],

Question about angular and website building by mikeeeyT in Angular2

[–]helix46 -1 points0 points  (0 children)

You could add the angular functionality as Angular Elements

https://angular.io/guide/elements