{"id":20384794,"url":"https://github.com/ogm710811/creating-a-library-with-the-angular-cli","last_synced_at":"2025-03-04T23:13:58.294Z","repository":{"id":97189850,"uuid":"145179124","full_name":"ogm710811/Creating-a-Library-with-the-Angular-CLI","owner":"ogm710811","description":"Angular 6 library example work space.","archived":false,"fork":false,"pushed_at":"2018-08-18T23:50:06.000Z","size":114,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-15T08:10:24.598Z","etag":null,"topics":["angular-cli","angular-library-builder","angular6","ng-packagr"],"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/ogm710811.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":"2018-08-18T01:04:45.000Z","updated_at":"2018-08-18T23:50:08.000Z","dependencies_parsed_at":null,"dependency_job_id":"ed19800a-13b1-40be-9e16-a639c606cad4","html_url":"https://github.com/ogm710811/Creating-a-Library-with-the-Angular-CLI","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ogm710811%2FCreating-a-Library-with-the-Angular-CLI","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ogm710811%2FCreating-a-Library-with-the-Angular-CLI/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ogm710811%2FCreating-a-Library-with-the-Angular-CLI/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ogm710811%2FCreating-a-Library-with-the-Angular-CLI/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ogm710811","download_url":"https://codeload.github.com/ogm710811/Creating-a-Library-with-the-Angular-CLI/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241935267,"owners_count":20044827,"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":["angular-cli","angular-library-builder","angular6","ng-packagr"],"created_at":"2024-11-15T02:29:46.991Z","updated_at":"2025-03-04T23:13:58.267Z","avatar_url":"https://github.com/ogm710811.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Example Angular 6 Library App Part 1 Repository\n\nThis project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 6.1.4.\n\n## Development server\n\nRun `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.\n\n## Project Description\n\nMany of the improvements on Angular 6 were to the Angular CLI. The one I have really been looking forward to is the integration of the Angular CLI with ng-packagr to generate and build Angular libraries. In this project we will walk through the details of creating an Angular library.\n\n## Project WorkSpace\n\nAngular workspace has two projects:\n\n### A library project\n\nThis is the library of components and services that we want to provide. This is the code that we could publish to npm for example.\n\n### An application project\n\nThis will be a test harness for our library. Sometimes this application is used as documentation and example usage of the library.\n\n\\*\\*\\* There will also be a third project for End to End testing that the Angular CLI generates for us by default which we will ignore.\n\n## Rules that will help you get your library started correctly so you won’t run into issues later.\n\n1. ALWAYS: Create your workspace using the name of your library-app. Then rename it to the name of your library.\n2. ALWAYS: Use a prefix when generating a library \u003e\u003e\u003e ng generate library example-ng6-lib --prefix=enl\n3. Before using our newly generated library you need to build it \u003e\u003e\u003e ng build --prod example-ng6-lib\n4. ALWAYS: Use the--prod flag when building your library.\n5. ALWAYS: In your test application import using your library by name and NOT the individual files \u003e\u003e\u003e import { ExampleNg6LibModule } from 'example-ng6-lib';\n6. ALWAYS: Rebuild your library after making changes.\n\n## Generating Library Components\n\nWhen generating a component for our library we use the --project flag to tell the Angular CLI that we want the component generated in our library project.\ncommand \u003e\u003e\u003e ng generate component foo --project=example-ng6-lib\n\nFOR COMPONENTS:\nUsing export makes the element visible.\nAdding it to the entry file makes the class visible.\n\n# Building \u0026 Packaging The Library\n\n## Tips\n\n1. Never directly modify the library distribution package.json.\n2. ALWAYS: Use npm pack to create the tgz file.\n3. Check scripts on root package.json \u003e\u003e\u003e To build \u0026 package our library we can now use: npm run package.\n\n## Using the Library in a Separate Application\n\nCreate a test workspace so you can use the library in that application.\nTo use the library in the new application \u003e\u003e\u003e npm install ../example-ng6-lib/dist/example-ng6-lib/example-ng6-lib-0.0.1.tgz\n\n## Tips\n\n1. ALWAYS: Install the library’s .tgz package and NOT the directory.\n2. In order to actually use a component from the library we need to add the library’s module to our App Module. To do this we make two changes in: src\\app\\app.module.ts\n   2.1. Import the ExampleNg6LibModule \u003e\u003e\u003e import { ExampleNg6LibModule } from 'example-ng6-lib';\n   2.2. Add the ExampleNg6LibModule to the imports array in our AppModule.\n\n## Further help\n\nTo get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fogm710811%2Fcreating-a-library-with-the-angular-cli","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fogm710811%2Fcreating-a-library-with-the-angular-cli","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fogm710811%2Fcreating-a-library-with-the-angular-cli/lists"}