简体   繁体   中英

Load Lazy loaded modules from CDN in angular

  <html lang="en">
   <head>
   link href="MY-CDN-PATH/styles.028e2d2ecf1b16206359.css" rel="stylesheet"  type="text/css"/>
   </head>
   <body>
      <app-root></app-root>
      <script src="https://MY-CDN-PATH/runtime.24248252fa5d092174cd.js" type="module"></script>
      <script src="https://MY-CDN-PATH/polyfills.9d865c4e055183e2a9fe.js" type="module"></script>
      <script src="https://MY-CDN-PATH/scripts.b9bbd771b6e5188128c7.js" type="module"></script>
      <script src="https://MY-CDN-PATH/main.dfa0c749560539af4c24.js" type="module"></script>
      <script src="https://MY-CDN-PATH/common.45a6ad43242581d6f4b4.js" type="module"></script>
   </body>
 </html>

I am using the above HTML to load my angular app from CDN. My app is loading the above js files from CDN.

Issue : Is there any way I can load my lazy loaded modules from CDN. Currently, it is loading from the server path where it is hosted. Can I set the path in HTML for lazy loaded modules to be served from the CDN path?

Setting deployUrl in the build settings will help you with this. The deployUrl is the URL Angular will look for any assets (including js files). It can be set via the command line like this:

ng build --deploy-url https://MY-CDN-PATH/

You can also set the deployUrl in the angular.json settings. I have different deploy URLs for both development and production.

https://angular.io/guide/deployment#the-deploy-url

The bad news is this feature is set to be deprecated in Angular 15. Hopefully there will be some direct replacement for this, but currently the workarounds aren't very good. This guy has some suggestions:

https://github.com/angular/angular-cli/issues/22113#issuecomment-1036333580

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM