The first issue is related to angular builder files. So after application production buld, files are something like this: index.html main-4NKTVJ7Q.js polyfills-FFHMD2TL.js styles-SFYJATU3.css So as you see there are some postfix in main, polyfills and styles files. How to get rid of them? Or, ok, how can I pull these files from cdn if I don't event know this postfixes after every application update. I want something like this: https://cdn.my-complex-application.com/1.2.345.0/build/browser/main.js not this: https://cdn.my-complex-application.com/1.2.345.0/build/browser/main-4NKTVJ7Q.js Application built in with development configuration doesn't have any postfixes on these files. The next question flows from the previous one. After angular builder done his job, index.html already has these files autolinked. Like this: <!doctype html> <html lang="en" data-beasties-container> <head><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <title>{TITLE}</title> <meta charset="utf-8"> <link rel="shortcut icon" href="{CDN_URL}images/theme/favicon.ico"> <link rel="icon" href="{CDN_URL}images/theme/favicon.ico"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <body class="mat-app-background"> <app-root></app-root> <script src="/build/browser/polyfills-FFHMD2TL.js" type="module"></script><script src="/build/browser/main-4NKTVJ7Q.js" type="module"></script></body> </html> As you see it writes sources for scripts from my local machine. So I would like to remove this autolink and do this myself in backend (php). So the question is: how to write my CDN URLs instead of local URLs. The next question is about cors. I modified my index.html like this: <!doctype html> <html lang="en"> <head> <title>{TITLE}</title> <meta charset="utf-8"> <link rel="shortcut icon" href="{CDN_URL}images/theme/favicon.ico"> <link rel="icon" href="{CDN_URL}images/theme/favicon.ico"> <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet"/> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="stylesheet" href="https://cdn.my-complex-application.com/1.2.345.0/build/browser/styles-SFYJATU3.css"></head> <body class="mat-app-background"> <app-root></app-root> <script src="https://cdn.my-complex-application.com/1.2.345.0/build/browser/polyfills-FFHMD2TL.js" type="module"></script><script src="https://cdn.my-complex-application.com/1.2.345.0/build/browser/main-3RZPEV5Y.js" type="module"></script></body> </html> Google Chrome gives me an error with polyfills.js - Access to script at 'https://cdn.my-complex-application.com/1.2.345.0/build/browser/polyfills-FFHMD2TL.js' from origin 'http://localhost' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource But mozilla doesn't throws any errors with polyfills.js How to get rid of this? The last question is about assets: So after all modifications of index.html mozilla tries to find asset with postfix too!! http://localhost/build/browser/media/angular-login-view-background-BNRG3VJM.png How to get rid of this postfixes? Continue reading...
