This Angular project demonstrates how to implement editable dotCMS pages using Angular Client-Side Rendering (CSR). It showcases best practices for integrating dotCMS content management with Angular's client-side rendering capabilities.
For the official Angular documentation, visit: Angular Documentation
git clone -n --depth=1 --filter=tree:0 https://github.com/dotCMS/core
cd core
git sparse-checkout set --no-cone examples/angular
git checkoutTo configure the Angular app to use your dotCMS instance:
Open the project folder in your code editor
Navigate to src/environments
Open environment.development.ts and update the following variables:
authToken: Your dotCMS auth tokendotcmsUrl: URL of your dotCMS instance (e.g., https://demo.dotcms.com)export const environment = {
production: false,
authToken: "YOUR_AUTH_TOKEN_HERE",
dotcmsUrl: "https://demo.dotcms.com",
};⚠️ Security Note: Ensure that the authToken used here has read-only permissions to minimize security risks in client-side applications.
ng serveNavigate to http://localhost:4200/. The application will automatically reload when source files are modified.
ng buildBuild artifacts are stored in the dist/ directory with performance optimizations.
ng test
ng e2eThe application uses a strategic combination of catch-all and specific routing in app.routes.ts:
/blog/post/:slug, /activities/:slug**): Handles all dotCMS-generated pages through a single PageComponentThis approach eliminates the need to duplicate dotCMS folder/page structure in Angular routing, preventing developer intervention for every new route.
Pages are rendered using the <dotcms-layout-body> component from @dotcms/angular library. This component:
components inputExample component mapping:
const DYNAMIC_COMPONENTS = {
Banner: BannerComponent,
Product: ProductComponent,
Activity: ActivityComponent
};src/app/
├── components/ # Standard site-wide components
│ ├── header/
│ ├── footer/
│ └── navigation/
└── dotcms/ # dotCMS-specific components
├── pages/ # Page components (see app.routes.ts)
├── components/ # Content type components
└── types/ # TypeScript interfacesDYNAMIC_COMPONENTS in page.tsapp.routes.tscomponents/ folder for site-wide usagedotcms/components/ for content renderingTo enable the Universal Visual Editor in dotCMS, follow these steps:
{
"config": [
{
"pattern": ".*",
"url": "http://localhost:4200"
}
]
}If you want more information about the UVE, please refer to the dotCMS UVE Documentation.
If you encounter issues while setting up or running the dotCMS Angular example, here are some common problems and their solutions:
This often occurs when the environment variables are not set correctly.
Solution:
authToken in src/environments/environment.development.ts with a valid token.If you're having trouble connecting to the dotCMS instance:
Solution:
dotcmsUrl in src/environments/environment.development.ts is correct.https://demo.dotcms.com, remember it restarts every 24 hours. You might need to wait or try again later.If you're getting 404 errors for pages that should exist:
Solution:
/about, make sure an "about" page exists in dotCMS.If you're experiencing unexpected behavior or errors related to dependencies:
Solution: Perform a clean reinstall of all dependencies by running:
rm -rf node_modules && rm package-lock.json && npm installThis command will:
node_modules directorypackage-lock.json fileAfter this, restart your development server:
ng serveIf you're experiencing build errors or changes aren't reflected in the running application:
Solution: Clear the Angular build cache and rebuild the project:
ng cache clean
ng build --configuration=development
ng serveThis sequence of commands will:
This is recommended when:
If the Universal Visual Editor is not functioning as expected:
Solution:
http://localhost:4200 (or update the UVE configuration if using a different port).If you continue to experience issues after trying these solutions, please check the dotCMS documentation or reach out to the dotCMS community for further assistance.
Found an issue with this documentation? View the source