{"id":23770962,"url":"https://github.com/bubblydoo/next.js-angular-demo","last_synced_at":"2025-09-05T14:33:47.234Z","repository":{"id":61769365,"uuid":"555035831","full_name":"bubblydoo/next.js-angular-demo","owner":"bubblydoo","description":"Next.js project that loads Angular components. Using Turborepo and @bubblydoo/angular-react.","archived":false,"fork":false,"pushed_at":"2024-07-12T11:31:24.000Z","size":1819,"stargazers_count":7,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-06T07:52:49.260Z","etag":null,"topics":["angular","nextjs","turborepo"],"latest_commit_sha":null,"homepage":"https://next-js-angular-demo.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bubblydoo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-10-20T20:51:06.000Z","updated_at":"2025-01-15T19:37:17.000Z","dependencies_parsed_at":"2024-07-12T13:18:22.195Z","dependency_job_id":"5cc00672-fe97-41f8-8fab-53cb701b7f27","html_url":"https://github.com/bubblydoo/next.js-angular-demo","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/bubblydoo/next.js-angular-demo","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bubblydoo%2Fnext.js-angular-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bubblydoo%2Fnext.js-angular-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bubblydoo%2Fnext.js-angular-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bubblydoo%2Fnext.js-angular-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bubblydoo","download_url":"https://codeload.github.com/bubblydoo/next.js-angular-demo/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bubblydoo%2Fnext.js-angular-demo/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273769943,"owners_count":25164895,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-05T02:00:09.113Z","response_time":402,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","nextjs","turborepo"],"created_at":"2025-01-01T03:18:40.808Z","updated_at":"2025-09-05T14:33:42.139Z","avatar_url":"https://github.com/bubblydoo.png","language":"TypeScript","readme":"# Next.js with Angular components\n\nThis is a demo to show a Next.js project which loads Angular components using [@bubblydoo/angular-react](https://github.com/bubblydoo/angular-react).\n\nIt is configured to lazily load any Angular component. Angular SSR is not supported, but fallbacks are rendered using Next.js SSR. The Angular components are rendered on the client-side only and use Suspense boundaries to be rendered.\n\n## Examples\n\n#### Loading an Angular component\n\n```tsx\nconst angularComponentLoader =\n  typeof IS_SERVER !== 'undefined' \u0026\u0026 IS_SERVER\n    ? () =\u003e Promise.reject(new LoadedAngularInServerError())\n    : () =\u003e import('angular-module/dist/demo').then((m) =\u003e m.DemoComponent);\n\nexport default function Index() {\n  return (\n    \u003cSuspense fallback={\u003cp\u003eLoading Angular Component...\u003c/p\u003e}\u003e\n      \u003cSuspendingLazyAngularWrapper\n        name=\"demo\"\n        serverFallback={\u003cp\u003eLoading Angular Component...\u003c/p\u003e}\n        componentLoader={angularComponentLoader}\n      /\u003e\n    \u003c/Suspense\u003e\n  );\n}\n```\n\n#### Using an Angular Service in React\n\n```tsx\nimport { useInjected, useObservable } from \"@bubblydoo/angular-react\";\nimport { DemoService } from \"angular-module/dist/demo\";\n\nexport default function AngularUsingComponent() {\n  const service = useInjected(DemoService);\n  const [value] = useObservable(service.value$);\n  return \u003cdiv\u003e{value}\u003c/div\u003e;\n}\n\nexport default function Index() {\n  return (\n    \u003cResolveAngularModuleContext fallback={\u003cdiv\u003eLoading Angular context...\u003c/div\u003e}\u003e\n      \u003cAngularUsingComponent /\u003e\n    \u003c/ResolveAngularModuleContext\u003e\n  );\n}\n```\n\n## Troubleshooting\n\n### `inject() must be called from an injection context` or `NG0203`\n\nThis is probably because of a version mismatch between @angular/* inside `packages/angular-module` or `apps/web`. Make sure they're the same.\n\nFor this reason we also set `compilerOptions.preserveSymlinks: true` and `config.resolveLoader.symlinks = false` (in Webpack), this corresponds to [this](https://stackoverflow.com/questions/51485868/inject-must-be-called-from-an-injection-context) setting inside Angular CLI.\n\n### `The Angular Compiler requires TypeScript \u003e=4.4.2 and \u003c4.6.0 but 4.6.2 was found instead.`\n\nThis is also because of a version mismatch of `typescript` between `packages/angular-module` or `apps/web`. Ensure that they're using the same version.\n\n### Usage with `@angular/animations`\n\nHot reloading with `@angular/animations` seems buggy because element removal works differently.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbubblydoo%2Fnext.js-angular-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbubblydoo%2Fnext.js-angular-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbubblydoo%2Fnext.js-angular-demo/lists"}