{"id":23701033,"url":"https://github.com/lennetech/ng-base","last_synced_at":"2025-09-03T05:32:04.325Z","repository":{"id":40289069,"uuid":"355259126","full_name":"lenneTech/ng-base","owner":"lenneTech","description":"Angular library with basic elements and for communication with the lenne.Tech Nest Server","archived":false,"fork":false,"pushed_at":"2024-07-08T09:37:09.000Z","size":19738,"stargazers_count":3,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-08-11T08:27:38.070Z","etag":null,"topics":["angular","best-practices","communication","graphql","helpers-library","library","services"],"latest_commit_sha":null,"homepage":"","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/lenneTech.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2021-04-06T16:32:34.000Z","updated_at":"2024-07-08T09:37:12.000Z","dependencies_parsed_at":"2022-07-20T13:47:59.431Z","dependency_job_id":"a3aee12c-a423-4b3d-ae6c-8cee59df507b","html_url":"https://github.com/lenneTech/ng-base","commit_stats":{"total_commits":383,"total_committers":8,"mean_commits":47.875,"dds":"0.17493472584856395","last_synced_commit":"63dbe72f184f5c0c73cb7b4084530ea0cd07bf63"},"previous_names":[],"tags_count":194,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lenneTech%2Fng-base","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lenneTech%2Fng-base/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lenneTech%2Fng-base/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lenneTech%2Fng-base/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lenneTech","download_url":"https://codeload.github.com/lenneTech/ng-base/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":231837441,"owners_count":18433963,"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","best-practices","communication","graphql","helpers-library","library","services"],"created_at":"2024-12-30T09:31:41.964Z","updated_at":"2024-12-30T09:31:42.703Z","avatar_url":"https://github.com/lenneTech.png","language":"TypeScript","readme":"# Angular Base\n\nThis is the base library of [lenne.Tech](https://lenne.tech) for Angular. It contains the npm package [ng-base](https://github.com/lenneTech/ng-base/tree/main/projects/ng-base).\n\n## Description\n\nThis library contains all the basics to start a new project in combination with the [lenne.Tech Nest Server](https://github.com/lenneTech/nest-server#lennetech-nest-server):\n\n- GraphQL service and elements for easy communication with GraphQL API (via Models)\n- Standard Model with methods for mapping, cloning and comparing models\n- Basic User Model with basic rights handling\n- Loading Service for the subscription of loading processes\n- Storage Service for comfortable saving of data in local storage\n- GraphQL service and elements for easy communication with GraphQL API (via Models)\n- Authentication service for user registration\n- and much more\n\nThe detailed description of the features and instructions on how to use the library can be found in the [README.md of the library](https://github.com/lenneTech/ng-base/tree/main/projects/ng-base/README.md).\n\nFor setting up a new project we recommend our [Angular Starter](https://github.com/lenneTech/angular-starter), which already contains this library and also includes a few sample elements as templates.\n\n## Requirements\n\n- [Node.js](https://nodejs.org) LTS (with npm)\n- [Angular CLI](https://cli.angular.io/)\n\n## Test the package\n\n```bash\nnpm run pack\n```\n\nAfterwards, the package can be included in an Angular project as follows in the `package.json` on a test basis:\n\n```json\n{\n  \"dependencies\": {\n    \"@lenne.tech/ng-graphql-client\": \"file:/PATH_TO_PROJECT/ng-base/dist/graphql-client/lenne.tech-ng-base-X.X.X.tgz\"\n  }\n}\n```\n\n## Publish\n\nUpdate version in `projects/graphql-client/package.json` and `projects/graphql-client/package-lock.json`.\n\nAfter that, the new package can be published as follows:\n\n```bash\nnpm run publish\n```\n\n## Initialize log\n\nThe initialization of this library is inspired by\n[The Best Way To Architect Your Angular Libraries](https://medium.com/@tomastrajan/the-best-way-to-architect-your-angular-libraries-87959301d3d3) from [Thomas Trajan](https://medium.com/@tomastrajan).\n\n### Init library\n\nInit Angular\n\n```bash\nng new ng-base --createApplication false --prefix lt\nng g library ng-base --prefix lt\n```\n\nChange package name in `projects/ng-base/src`\n\n```\n\"name\": \"@lenne.tech/ng-base\"\n```\n\nReplace `path` configuration in `tsconfig.json`:\n\n```json\n{\n  \"paths\": {\n    \"@lenne.tech/ng-base/*\": [\"projects/ng-base/*\", \"projects/ng-base\"],\n    \"@lenne.tech/ng-base\": [\"dist/ng-base/*\", \"dist/ng-base\"]\n  }\n}\n```\n\nDelete the content of the projects/some-lib/src/lib/ folder and remove content of the root public-api.ts file so that it’s empty.\n\nInstall [ng-samurai](https://github.com/kreuzerk/ng-samurai) to extend the Angular CLI for creating Sub-entries:\n\n```\nnpm i -D ng-samurai\n```\n\nCreate new Sub-entry (without component `--gc false` and module `--gm false`):\n\n```\nng g ng-samurai:generate-subentry core --gc false --gm false\n```\n\n### Linting\n\nMigration from [TSLint](https://palantir.github.io/tslint/) (depracted since 2019) to [ESLint](https://eslint.org/) (see [Migrationsanleitung](https://github.com/angular-eslint/angular-eslint#migrating-an-angular-cli-project-from-codelyzer-and-tslint)):\n\n```bash\nng add @angular-eslint/schematics\nng g @angular-eslint/schematics:convert-tslint-to-eslint ng-base\nrm tslint.json\nnpm uninstall tslint\nnpm uninstall codelyzer\n```\n\nAdditional rules in `.eslintrc.json`:\n\n```json\n{\n  \"overrides\": [\n    {\n      \"rules\": {\n        \"no-underscore-dangle\": \"off\"\n      }\n    }\n  ]\n}\n```\n\nInstall [Prettier](https://prettier.io/) and [prettier-quick](https://github.com/azz/pretty-quick#readme):\n\n```bash\nnpm install --save-dev --save-exact prettier\nnpm install --save-dev pretty-quick\n```\n\nAdd file `.prettierrc`:\n\n```json\n{\n  \"arrowParens\": \"always\",\n  \"plugins\": [\"./extras/prettier-imports\"],\n  \"printWidth\": 120,\n  \"singleQuote\": true\n}\n```\n\nAdd file `extras/prettier-imports.js`:\n\n```javascript\nconst { parsers: typescriptParsers } = require('prettier/parser-typescript');\nconst ts = require('typescript');\n\n// =============================================================================\n// Prettier plugin to optimize and sort imports\n// see https://github.com/prettier/prettier/issues/6260\n// =============================================================================\n\nclass SingleLanguageServiceHost {\n  constructor(name, content) {\n    this.name = name;\n    this.content = content;\n    this.getCompilationSettings = ts.getDefaultCompilerOptions;\n    this.getDefaultLibFileName = ts.getDefaultLibFilePath;\n  }\n  getScriptFileNames() {\n    return [this.name];\n  }\n  getScriptVersion() {\n    return ts.version;\n  }\n  getScriptSnapshot() {\n    return ts.ScriptSnapshot.fromString(this.content);\n  }\n  getCurrentDirectory() {\n    return '';\n  }\n}\n\nfunction applyChanges(text, changes) {\n  return changes.reduceRight((text, change) =\u003e {\n    const head = text.slice(0, change.span.start);\n    const tail = text.slice(change.span.start + change.span.length);\n    return `${head}${change.newText}${tail}`;\n  }, text);\n}\n\nfunction organizeImports(text) {\n  const fileName = 'file.ts';\n  const host = new SingleLanguageServiceHost(fileName, text);\n  const languageService = ts.createLanguageService(host);\n  const formatOptions = ts.getDefaultFormatCodeSettings();\n  const fileChanges = languageService.organizeImports({ type: 'file', fileName }, formatOptions, {});\n  const textChanges = [...fileChanges.map((change) =\u003e change.textChanges)];\n  return applyChanges(text, textChanges);\n}\n\nconst parsers = {\n  typescript: {\n    ...typescriptParsers.typescript,\n    preprocess(text) {\n      text = organizeImports(text);\n      return text;\n    },\n  },\n};\n\n// Uses module.export because of 'Unexpected token export' error\nmodule.exports = parsers;\n```\n\nAdd scripts in `package.json`:\n\n```json\n\"scripts\": {\n  ...\n  \"format:check\": \"prettier --config ./.prettierrc --list-different \\\"src/{app,environments,assets}/**/*{.ts,.js,.json,.scss}\\\"\",\n  \"format:fix\": \"pretty-quick --staged\",\n  \"format:fixAll\": \"prettier --write src\",\n  ...\n}\n```\n\n`format:check`: Check only  \n`format:fix`: Optimize stage files  \n`format:fixAll`: Optimize all files\n\n### Automatic optimizations and checks\n\nInstall [husky](https://typicode.github.io/husky):\n\n```bash\nnpm install --save-dev husky\n```\n\nAdd scripts in `package.json`:\n\n```json\n\"scripts\": {\n  \"check\": \"npm run format:fix \u0026\u0026 npm run lint\",\n  \"postinstall\": \"husky install .husky\",\n}\n```\n\nAdd pre-commit hook:\n\n```\nmkdir .husky\nnpx husky add .husky/pre-commit \"cd $(dirname \"$0\") \u0026\u0026 npm run check\"\n```\n\nInit husky via `npm i`.\n\n### Optimize TypeScript config\n\nTo get a little more leeway in dealing with TypeScript's strict typing, the following rules should be disabled in `compilerOptions` of `tsconfig.json`:\n\n```json\n{\n  \"compilerOptions\": {\n    \"strictNullChecks\": false,\n    \"strictPropertyInitialization\": false,\n    \"noImplicitAny\": false\n  }\n}\n```\n\n## Thanks\n\nMany thanks to the developers of [Angular](https://angular.io/), [Apollo Angular](https://apollo-angular.com/)\nand all the developers whose packages are used here.\n\n## License\n\nMIT - see LICENSE\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flennetech%2Fng-base","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flennetech%2Fng-base","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flennetech%2Fng-base/lists"}