{"id":27307541,"url":"https://github.com/ukcoderj/angularlibraryandconumerapp","last_synced_at":"2025-04-12T04:10:41.291Z","repository":{"id":98400581,"uuid":"407433680","full_name":"ukcoderj/AngularLibraryAndConumerApp","owner":"ukcoderj","description":"Angular project calling a library project","archived":false,"fork":false,"pushed_at":"2021-10-11T13:10:22.000Z","size":151,"stargazers_count":7,"open_issues_count":0,"forks_count":4,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-11-04T14:57:23.318Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/ukcoderj.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":"2021-09-17T06:38:31.000Z","updated_at":"2024-01-03T18:08:58.000Z","dependencies_parsed_at":"2023-04-26T04:40:58.737Z","dependency_job_id":null,"html_url":"https://github.com/ukcoderj/AngularLibraryAndConumerApp","commit_stats":null,"previous_names":["ukcoderj/angularlibraryandconumerapp"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ukcoderj%2FAngularLibraryAndConumerApp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ukcoderj%2FAngularLibraryAndConumerApp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ukcoderj%2FAngularLibraryAndConumerApp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ukcoderj%2FAngularLibraryAndConumerApp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ukcoderj","download_url":"https://codeload.github.com/ukcoderj/AngularLibraryAndConumerApp/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248514221,"owners_count":21116903,"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","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":[],"created_at":"2025-04-12T04:10:40.698Z","updated_at":"2025-04-12T04:10:41.279Z","avatar_url":"https://github.com/ukcoderj.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular Library and Project utilising the library\nAngular 12 project calling a library project\n\nThis tutorial will detail how to:\n- Create an angular library\n- Create a component in that library\n- Export that component for use in an application\n- Create an angular application\n- Import the local component library\n- Access debugging for the library from the main application.\n\n\n## Creating the shared library\n\n1. cd to the starting folder (in this case 'code').\n\n\n2. `ng new ngx-my-shared-libs --create-application=false`\n\n3. `cd ngx-my-shared-libs`\n\n4. `ng generate library my-shared-components`\n\n5. `cd projects\\my-shared-components\\src\\lib` (full path {repo}\\code\\ngx-my-shared-libs\\projects\\my-shared-components\\src\\lib)\n\n6. `ng g c TestView` (creates new test component)\n\n7. Find `public-api.ts` under code\\ngx-my-shared-libs\\projects\\my-shared-components\\src\\lib\n\n8. add a line for the new component, so the file now looks like the following\n\n````\n/*\n * Public API Surface of my-shared-components\n */\n\nexport * from './lib/my-shared-components.service';\nexport * from './lib/my-shared-components.component';\nexport * from './lib/my-shared-components.module';\n\n\nexport * from './lib/test-view/test-view.component';\n\n````\n\n9. Export the view component in the module (code\\ngx-my-shared-libs\\projects\\my-shared-components\\src\\lib\\my-shared-components.component.ts):\n\n````\nimport { NgModule } from '@angular/core';\nimport { MySharedComponentsComponent } from './my-shared-components.component';\nimport { TestViewComponent } from './test-view/test-view.component';\n\n\n\n@NgModule({\n  declarations: [\n    MySharedComponentsComponent,\n    TestViewComponent\n  ],\n  imports: [\n  ],\n  exports: [\n    MySharedComponentsComponent,\n    TestViewComponent /* NEW! */\n  ]\n})\nexport class MySharedComponentsModule { }\n\n\n````\n\n\n10. Open command prompt at code\\ngx-my-shared-libs and run `ng build --watch`.\n\n\n\n# Importing Into The Angular Project\n\n11. In a new command prompt, cd back to the top level i.e. {repo}/code.\n\n12. create a new sample app using `ng new ngx-sample-app --skip-tests` . Answer the init questions as you wish.\n\n13. `cd ngx-sample-app`\n\n13. now we need to reference the local library using npm install with a local link. Remember to link to the dist folder.\n\n\n`npm install \"file://../ngx-my-shared-libs//dist//my-shared-components\"`\n\n\n14. Import the component into your application module (code\\ngx-sample-app\\src\\app\\app.module.ts)\n\n````\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\n\nimport { AppRoutingModule } from './app-routing.module';\nimport { AppComponent } from './app.component';\nimport { MySharedComponentsModule } from 'my-shared-components';\n\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    AppRoutingModule,\n    MySharedComponentsModule\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n\n````\n\n15. Open up code\\ngx-sample-app\\src\\app\\app.component.html\n\nDelete the default contents and update like so:\n\n````\nApp Component\n\n\u003clib-test-view\u003e\u003c/lib-test-view\u003e\n````\n\n16. Go to the angular.json in ngx-sample-app (code\\ngx-sample-app\\angular.json) and add preserveSymLinks to the biuld options \n\nSample below shortened for brevity.\n\n````\n\n\"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:browser\",\n          \"options\": {\n            \"preserveSymlinks\": true,\n            \"outputPath\": \"dist/ngx-sample-app\",\n            \"index\": \"src/index.html\",\n            \"main\": \"src/main.ts\",\n\n````\n\n\n17. To this point, we can actually build everything, but we can't actually debug those libraries, so let's go ahead and fix that. In angular.json (code\\ngx-sample-app\\angular.json), update serve to include options for debugging libs too.\n\nAgain, shortened for brevity - starting at line 89 in my sample $projects.ngx-sample-app.architect.serve:\n\n````\n\"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"options\": {\n            \"sourceMap\": {\n              \"scripts\": true,\n              \"styles\": true,\n              \"vendor\": true\n            }\n          },\n\n\n````\n\n\n\n18. In the command prompt for the app ({repo/code\\ngx-sample-app\u003e}) run `ng serve`.\n\n19. Visit https://localhost:4200 to view the results.\n\n20. In chrome, you can now press F12, then go to sources, Ctrl+P to search files and type 'test-view' to get to the test-view component.\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fukcoderj%2Fangularlibraryandconumerapp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fukcoderj%2Fangularlibraryandconumerapp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fukcoderj%2Fangularlibraryandconumerapp/lists"}