Angular JS
Angular is a platform and framework for building single-page client applications using HTML and TypeScript, maintained by Google.
Install Translate.website on Angular JS
Building your app with Angular? You don't need to change your component architecture or install any npm packages to make your Angular app multilingual.
By adding the Translate.website script to src/index.html, you can enable automatic translation across every route and component in your Angular app. It's the simplest, most maintainable approach — no services, no modules, no build configuration required.
Once set up, Translate.website will automatically detect and translate your content in real time for visitors in different languages.
This guide walks you through the entire setup from start to finish.
Configure Angular to Enable Translate.website
Adding Translate.website to Angular is as simple as pasting one script tag into src/index.html. Here's exactly how to do it.
Before You Begin
- An active Translate.website account with your snippet ready.
- An Angular project (Angular CLI 12+).
- Access to src/index.html.
- No additional npm packages required.
Step 01: Get Your Translate.website Snippet
Log in to app.translate.website and copy your unique script snippet from Settings → Snippet.
- Log in to app.translate.website
- Go to Settings → Snippet
- Copy the full <script> tag including src and data-site-id attributes
- Keep it ready for the next step
Step 02: Add the Script to src/index.html
In Angular projects, src/index.html is the root HTML file served to the browser. All Angular pages are rendered within this file, making it the ideal place to inject the Translate.website script.
- Open your Angular project in your code editor.
- Navigate to src/index.html.
- Find the closing </head> tag.
- Paste your Translate.website snippet just before </head>.
- Save the file.
- Alternative: Add to angular.json under projects.[name].architect.build.options.scripts for global script injection.
Step 03: Build and Verify
Run the Angular development server and confirm the script is loading.
- Run: ng serve
- Open http://localhost:4200 in your browser.
- Open DevTools → Network and look for the Translate.website script.
- The translation widget should appear on your Angular app.
- For production: run ng build and deploy normally.
🚀 What Happens After Saving?
The Translate.website script loads once Angular bootstraps and detects your visitors' browser language preferences. It works alongside Angular's change detection cycle without interfering with your components.
No Angular-specific configuration, services, or modules required — the script operates independently.
⚠ Recommended: Clear Cache
If you're using a CDN or browser caching in production, clear your cache after deploying to ensure the updated index.html (with the Translate.website script) is served immediately to all visitors.
🔁 Safe & Reversible
This integration is completely reversible. To remove Translate.website from your Angular app, simply delete the script tag from src/index.html and rebuild. No Angular components, modules, or services were modified.
💡 Why This Method Is Recommended
- Works with Angular Universal (SSR) and standard CSR Angular apps.
- No NgModule changes — add one line to index.html and you're done.
- Compatible with all Angular versions from 12 onward.
- Zero impact on your Angular bundle size or build process.
Ready to make your Angular app multilingual?
One script in index.html — that's all it takes to go multilingual with Angular.
