recipes.ng-add-schematic
ng add schematic
See exactly what the ng-add schematic generates and patches in an existing Angular workspace, so running it holds no surprises.
- @ngx-runtime-i18n/schematics
@ngx-runtime-i18n/schematics provides an ng-add schematic that wires @ngx-runtime-i18n/angular into an existing Angular workspace in one command, instead of following the manual setup steps in Getting started by hand.
ng add @ngx-runtime-i18n/schematics --default-lang=en --additional-langs=hi,deOptions
| Option | Type | Default | Description |
|---|---|---|---|
project |
string |
— | The Angular project to configure. Required. |
defaultLang |
string |
en |
The default language tag (BCP-47). |
additionalLangs |
string[] |
[] |
Additional language tags to scaffold catalogs for. |
ssr |
boolean |
false |
Reserved for SSR provider setup. |
ssr is accepted but not yet wired to anything — it's reserved for a future release that also patches the server bootstrap. For SSR today, follow SSR with Express after ng add finishes.
What actually runs, step by step
Running the schematic executes four steps in order, each of which is safe to reason about independently.
1. Dependencies
Adds @ngx-runtime-i18n/angular and @ngx-runtime-i18n/core to dependencies in package.json, pinned to ^<version> matching the schematics package's own version.
2. Catalog files
Scaffolds public/i18n/<lang>.json for defaultLang and each additionalLangs entry, but only for files that don't already exist — it never overwrites a catalog you've already started editing. The generated sample catalog is the same shape for every language:
{
"app": { "title": "My App" },
"nav": { "home": "Home", "about": "About" }
}3. app.config.ts patch
The schematic checks three conventional locations in order — projects/<project>/src/app/app.config.ts, src/app/app.config.ts, apps/<project>/src/app/app.config.ts — and patches the first one it finds. If the file already contains provideRuntimeI18n, the schematic treats it as already configured and leaves the file untouched. Re-running ng add after a partial manual setup is safe for this reason — it won't produce duplicate providers.
Otherwise it inserts an import and a provider entry built from your options:
import { provideRuntimeI18n } from '@ngx-runtime-i18n/angular';
// ...
providers: [
provideRuntimeI18n({
defaultLang: 'en',
supported: ['en', 'hi', 'de'],
fetchCatalog: (lang, signal) => fetch(`/i18n/${lang}.json`, { signal }).then(r => r.json()),
}),
// ...your existing providers
],If the target file doesn't contain a providers: [ array in a recognizable shape, the schematic fails loudly with a SchematicsException naming the file. Check the error message for the exact path it tried — it does not silently leave an unused import with no provider registered.
4. Install
Schedules an npm install via NodePackageInstallTask so the new dependencies are on disk immediately after the schematic finishes, with no separate install step to remember.
Validation before anything runs
Before touching the tree, the schematic validates --project against a plain kebab-case identifier pattern and every language tag (defaultLang plus each of additionalLangs) against a BCP-47-style pattern. An invalid tag or project name throws before any file is written — a malformed --additional-langs value can't produce a half-scaffolded workspace.
Run the schematic once against a scratch project to see the exact diff it produces for your own app.config.ts shape, then decide whether to keep it or wire provideRuntimeI18n() by hand per Getting started — both leave you in the same place.