{"id":19351387,"url":"https://github.com/thirdygayares/angular-components-modules-routing","last_synced_at":"2026-05-15T11:09:39.305Z","repository":{"id":256354536,"uuid":"850259391","full_name":"thirdygayares/Angular-Components-Modules-Routing","owner":"thirdygayares","description":"Angular Create Components, Modules, and Routes","archived":false,"fork":false,"pushed_at":"2024-09-10T07:20:13.000Z","size":139,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-24T10:34:42.706Z","etag":null,"topics":["angular-basics","angular-components","angular-foundation","angular-modules","angular-routes"],"latest_commit_sha":null,"homepage":"https://software-engineer.thirdygayares.com/angular-create-components-modules-and-routes","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/thirdygayares.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2024-08-31T09:40:16.000Z","updated_at":"2024-09-10T07:20:38.000Z","dependencies_parsed_at":"2024-09-10T09:27:16.714Z","dependency_job_id":"846b6c80-4801-4815-bfb4-9a970cc25bfc","html_url":"https://github.com/thirdygayares/Angular-Components-Modules-Routing","commit_stats":null,"previous_names":["thirdygayares/angular-components-modules-routing"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/thirdygayares/Angular-Components-Modules-Routing","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thirdygayares%2FAngular-Components-Modules-Routing","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thirdygayares%2FAngular-Components-Modules-Routing/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thirdygayares%2FAngular-Components-Modules-Routing/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thirdygayares%2FAngular-Components-Modules-Routing/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thirdygayares","download_url":"https://codeload.github.com/thirdygayares/Angular-Components-Modules-Routing/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thirdygayares%2FAngular-Components-Modules-Routing/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33064662,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-13T13:14:54.681Z","status":"online","status_checked_at":"2026-05-15T02:00:06.351Z","response_time":103,"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-basics","angular-components","angular-foundation","angular-modules","angular-routes"],"created_at":"2024-11-10T04:36:06.326Z","updated_at":"2026-05-15T11:09:39.288Z","avatar_url":"https://github.com/thirdygayares.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"### **Components**\n\nComponents are building blocks in Angular applications. Each component contains the HTML, CSS, and logic for a part of the user interface. You can think of them like small, reusable parts of a webpage.\n\n### **Module**\n\nA module is a container for a set of components, services, and other code that works together in an Angular application. The root module, usually named `AppModule`, starts the application and contains all other components.\n\n### **Routes**\n\nRoutes define how users navigate between different pages or views in your application. You set up routes so that when users click a link, they see the right content (such as the Homepage or Login page).\n\n### **Router**\n\nThe Angular router helps manage navigation between different views or pages. It allows you to change the visible part of the application based on the URL without reloading the entire page.\n\n# 1\\. **Create a folder named** `components`\n\nIn your Angular project, create a folder named `components`. This folder will contain all the individual components of your project, like the homepage, login, and services.\n\n![](https://cdn.hashnode.com/res/hashnode/image/upload/v1725088482834/e6bcfe9d-b2e2-4819-b455-f999c2ca15fd.png)\n\n# 2\\. **Generate 4 Components**\n\nYou can generate components by running the Angular CLI command in your terminal:\n\n```bash\nng generate component components/homepage\nng generate component components/login\nng generate component components/services\nng generate component components/[another-component]\n```\n\nThese commands will create the necessary files for each component in the `components` folder.\n\n![](https://cdn.hashnode.com/res/hashnode/image/upload/v1725088547766/babf3fe3-749d-484f-9e32-86108e3109c0.png)\n\n![](https://cdn.hashnode.com/res/hashnode/image/upload/v1725088870903/3bab5ad5-e3cc-48de-8234-def961e34661.png)\n\n# 3\\. **Move the 3 Folders to the Components Folder**\n\nIf you generated the components in the wrong location, move the folders to the correct `components` folder.\n\n![](https://cdn.hashnode.com/res/hashnode/image/upload/v1725088926182/1918d300-8009-4744-9387-6ac9a79d686c.png)\n\n# 4\\. **Add** `app.module.ts`\n\nEnsure the `app.module.ts` file is set up to include the necessary imports for routing, form handling, animations, and the components. Follow the provided structure in your example.\n\n![](https://cdn.hashnode.com/res/hashnode/image/upload/v1725089334004/9f5e3281-34d4-4857-b246-0a2220d47c34.png)\n\nContent of app.module.ts\n\n```typescript\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport {RouterModule, Routes} from '@angular/router';\nimport {ReactiveFormsModule} from '@angular/forms';\nimport {CommonModule} from \"@angular/common\";\nimport {BrowserAnimationsModule} from \"@angular/platform-browser/animations\";\nimport {AppComponent} from \"./app.component\";\nimport {provideAnimationsAsync} from \"@angular/platform-browser/animations/async\";\nimport {HomepageComponent} from \"./components/homepage/homepage.component\";\nimport {LoginComponent} from \"./components/login/login.component\";\nimport {ServicesComponent} from \"./components/services/services.component\";\n\n\n\nconst routes: Routes = [\n  { path: '', component: HomepageComponent },\n  { path: 'login', component: LoginComponent },\n  { path: 'services', component: ServicesComponent },\n];\n\n@NgModule({\n  imports: [\n    CommonModule,\n    BrowserModule,\n    BrowserAnimationsModule,\n    ReactiveFormsModule,\n    RouterModule.forRoot(routes, {enableTracing: true}),\n  exports: [RouterModule],\n\n  declarations: [\n    AppComponent,\n  ],\n  providers: [\n    provideAnimationsAsync(),\n    ],\n\n  bootstrap: [\n    AppComponent\n  ]\n})\nexport class AppModule { }\n```\n\n# 5\\. **Remove** `standalone: true` and `imports: []` from All Components\n\nIn each component's `.ts` file, remove the lines `standalone: true` and `imports: []`, since they are not needed in this project setup.\n\n![](https://cdn.hashnode.com/res/hashnode/image/upload/v1725089319825/19acf5ef-a97e-4afe-bf49-7b3c4a9f8286.png)\n\n# 6\\. **Update** `main.ts`\n\nEnsure that `main.ts` bootstraps (starts) the application with the `AppModule` as shown in your example.\n\n```bash\nimport { platformBrowserDynamic } from '@angular/platform-browser-dynamic';\n\nimport { AppModule } from './app/app.module';\n\nplatformBrowserDynamic().bootstrapModule(AppModule)\n  .catch(err =\u003e console.error(err));\n```\n\n# 7\\. **Update** `app.component.html`\n\nModify `app.component.html` to include the navigation links and the `router-outlet`, which will display the routed views.\n\n```bash\n\u003ca routerLink=\"/\"\u003eHomepage\u003c/a\u003e\n\u003cbr\u003e\n\u003ca routerLink=\"/login\"\u003eLogin\u003c/a\u003e\n\u003cbr\u003e\n\u003ca routerLink=\"/services\"\u003eServices\u003c/a\u003e\n\u003crouter-outlet\u003e\u003c/router-outlet\u003e\n```\n\n# **8.OUTPUT**\n\n![](https://cdn.hashnode.com/res/hashnode/image/upload/v1725096655852/45c6de75-69b3-4d0e-896f-eec0b3ab462d.gif)\n\nGithub link\n\n[https://github.com/Thirdy-Lecture/Angular-Routing.git](https://github.com/Thirdy-Lecture/Angular-Routing.git)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthirdygayares%2Fangular-components-modules-routing","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthirdygayares%2Fangular-components-modules-routing","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthirdygayares%2Fangular-components-modules-routing/lists"}