Angular Universal executes on the server, generating static application pages that later get bootstrapped on the client.
When you are ready to deploy your Angular Universal application to a remote server, for the simplest deployment, create a production build and copy the output directory to a web server. Please follow the instructions
npm install -g @angular/cli
ng new angular-ssr
cd angular-ssr
ng add @angular/ssr
4. Run the application in the development environment
By default, it will start the development server at
http://localhost:4200/
ng serve --open
"View page source"(shortcut is Ctrl + U) in the browser, right-click on the page or go to view-source:http://localhost:4200/ directly, find <app-root> node/tag, you will find it shows all the child elements, which is not like Angular SPA. Great, this means your SSR project works well.
6. Design your application, test it with the development server, prepare to deploy the application
This will package all project files and related modules to a new dist/angular-ssr folder under the project directory.
ng build
7. Test production files on your local machine
By default, it will start the server at
http://localhost:4000
cd ./dist/angular-ssr/server
node server.mjs
8. Stop the local server to release in-use files, archive the dist folder and its sub-items to .zip file
If you use other NodeJS packages in your project, you will also need to package the entire node_modules folder and upload it to the server
10. Unzip the .zip file to the target site path, i.e. site3
11. Create an app.js file under site3 folder and set its content as:
import("./dist/angular-ssr/server/server.mjs");
13. Change the content of site3/web.config file to
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<handlers>
<add name="iisnode" path="app.js" verb="*" modules="iisnode" />
</handlers>
<rewrite>
<rules>
<rule name="DynamicContent">
<match url="/*" />
<action type="Rewrite" url="app.js"/>
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
The final folder structure should be like:
site3/
|-- dist/
|-- angular-ssr/
|-- browser/
...
|-- server/
|-- server.mjs
...
...
|-- app.js
|-- web.config
14. Access your site URL to check the application
Article ID: 2271, Created: December 18, 2023 at 7:34 PM, Modified: January 24 at 9:23 PM