Angular Universal executes on the server, generating static application pages that later get bootstrapped on the client.
For Angular v17+ Universal project, please refer to this link.
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 @nguniversal/express-engine
4. Run the application in the development environment
By default, it will start the development server at
http://localhost:4200/
npm run dev:ssr
"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
npm run build:ssr
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 main.js
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. Copy the main.js file from site3/dist/angular-ssr/server to site3
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="main.js" verb="*" modules="iisnode" />
</handlers>
<rewrite>
<rules>
<rule name="DynamicContent">
<match url="/*" />
<action type="Rewrite" url="main.js"/>
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
The final folder structure should be like:
site3/
|-- dist/
|-- angular-ssr/
|-- browser/
...
|-- server/
|-- main.js
...
...
|-- main.js
|-- web.config
14. access your site URL to check the application
Article ID: 2219, Created: April 20, 2022 at 8:18 PM, Modified: January 24 at 9:22 PM