Menu
I would like to deploy my Angular app (with AOT) to a CDN, while using my own REST server.
I would like the first request always go to my REST server (let say https://example.com). Then the first response will instruct the browser to load Angular's first module from the CDN.
All the resources requests (API requests) will of course go to my REST server (let's say https://example.com/api/XXXX).
Now my question is:
How do the codes know from where to load next Angular module?
Could someone please explain the mechanism behind this?
808
Deploy to GitHub Pageslink To deploy your Angular application to GitHub Pages, complete the following steps: Create a GitHub repository for your project. When you paste these commands from GitHub, they run automatically. Create and check out a git branch named gh-pages .
A CDN is a content delivery network. It is a system of distributed servers that deliver content to a user based on the user's geographic location. CDNs can be used to improve the performance of Angular applications by delivering content from a server that is closer to the user's location.
Short Answer: use the option "--deploy-url" while doing "ng build".
What the "--deploy-url" does is to force <script> tags to use an absolute URL using the domain you specify. This way the browser will always know where to load static asset files (JavaScript, Images etc)
=========================
Use Case:
The REST server is running at our data centre. It not only provides REST APIs, but also serve the initial index.html (meaning the VERY FIRST request from browser always go to this REST server).
All our Angular static files (They are just JavaScript files) are deployed to CDNs (e.g. AWS, AZURE, GOOGLE ...)
=========================
Without the "--deploy-url", "ng build" will yield an index.html as following:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>MyApp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root>Loading...</app-root>
<script type="text/javascript" src="/inline.bundle.js"></script>
<script type="text/javascript" src="/polyfills.bundle.js"></script>
<script type="text/javascript" src="/styles.bundle.js"></script>
<script type="text/javascript" src="/vendor.bundle.js"></script>
<script type="text/javascript" src="/main.bundle.js"></script>
</body>
</html>With the "--deploy-url", "ng build" will yield an index.html as following:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>MyApp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root>Loading...</app-root>
<script type="text/javascript" src="https://any.cdn.com/inline.bundle.js"></script>
<script type="text/javascript" src="https://any.cdn.com/polyfills.bundle.js"></script>
<script type="text/javascript" src="https://any.cdn.com/styles.bundle.js"></script>
<script type="text/javascript" src="https://any.cdn.com/vendor.bundle.js"></script>
<script type="text/javascript" src="https://any.cdn.com/main.bundle.js">
</script>
</body>
</html>=========================
What does deployment look like:
For example,
ng build --deploy-url YOUR-CDN-SERVER-DOMAIN --prod --aot
This should generate a /dist folder with everything (including index.html) in it. Next simply move the index.html to you REST server, and deploy the remaining of the files to CDNs.
Now you can have users go to your own domain www.example.com first. You can put all those Angular generated JS files to whatever CDNs you want without worrying about CORS.
=======================
Notes:
This solution may explain things from a high level point of view. It does work perfectly in my situation. Please feel free to leave comments if you have questions.
154
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With