Deploy Angular Application in WordPress

Follow the below steps to deploy angular application in WordPress. i.e., build files are deployed in different domain or location and consumer index.html from different domain or location.

• Create an angular application with routing (Angular 21.1.3)
• Create and add few router components
  • Example: http://localhost:4200/one, http://localhost:4200/two, http://localhost:4200/three
• Enable HashLocationStrategy in app.config.ts

export const appConfig: ApplicationConfig = {
  providers: [
    provideBrowserGlobalErrorListeners(),
    provideRouter(routes, withHashLocation())
  ]
};

• Add deployment URL in angular.json file in projects > projectName > build > configurations > production

"deployUrl": "/wp-content/appName/",

or

"deployUrl": "https://www.yourdomain.com/wp-content/appName/",

• deployment URL is the path where you are going to keep the build files and assets in the server except index.html and favicon.png
• Create production specific index.html file and configure it in angular.json file in projects > projectName > build > configurations > production

"index": {
    "input": "src/index.prod.html", // Path to your production index file
    "output": "content.html" // Name of the file generated in the dist folder
},

• In the index.prod.html, add the below content

<app-root></app-root>

Note: Adding app-root element directly in index.prod.html without basic html structure won’t add the preload module for the first / landing page lazy load router component declared in the route config.

• Configure assets invloves environment.ts

"configurations": {
  "production": {
    // ... other production settings
    "index": {
      "input": "src/index.prod.html", // Path to your production index file
      "output": "index.html"          // Name of the file generated in the dist folder
    },
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
      // ... other file replacements
    ]
  }
}

• Declare assets path for local and prod then use it from environment.ts file in angular templates when ever assets are consumed.
• This doesn’t require for CSS or SCSS File requires on JS and HTML Templates
• Consuming assets in CSS or SCSS File have copy of dependent file with hash in file name and the path will be relative to the css file path