{"id":21597608,"url":"https://github.com/micro-lc/angular12-template","last_synced_at":"2025-03-18T11:26:27.754Z","repository":{"id":37970455,"uuid":"445787172","full_name":"micro-lc/angular12-template","owner":"micro-lc","description":"Template project to create a micro-lc plugin using Angular 12","archived":false,"fork":false,"pushed_at":"2025-01-16T16:02:07.000Z","size":537,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-01-24T17:45:16.289Z","etag":null,"topics":["angular","micro-lc","microfrontend"],"latest_commit_sha":null,"homepage":"https://micro-lc.io","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/micro-lc.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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-01-08T10:21:37.000Z","updated_at":"2025-01-16T16:02:01.000Z","dependencies_parsed_at":"2023-12-06T12:41:28.328Z","dependency_job_id":"38c05225-fd36-4516-bf94-1851eca59ad2","html_url":"https://github.com/micro-lc/angular12-template","commit_stats":null,"previous_names":[],"tags_count":6,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/micro-lc%2Fangular12-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/micro-lc%2Fangular12-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/micro-lc%2Fangular12-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/micro-lc%2Fangular12-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/micro-lc","download_url":"https://codeload.github.com/micro-lc/angular12-template/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244209787,"owners_count":20416338,"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","micro-lc","microfrontend"],"created_at":"2024-11-24T18:09:28.426Z","updated_at":"2025-03-18T11:26:27.726Z","avatar_url":"https://github.com/micro-lc.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://avatars.githubusercontent.com/u/92730708?s=96\u0026v=4\" /\u003e \n  \u003ch1\u003eAngular 12 Template\u003c/h1\u003e\n\u003c/div\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://mia-platform.eu/?utm_source=referral\u0026utm_medium=github\u0026utm_campaign=micro-lc\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/Supported%20by-Mia--Platform-green?style=for-the-badge\u0026link=https://mia-platform.eu/\u0026color=DE0D92\u0026labelColor=214147\" alt=\"Mia-Platform\"/\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/micro-lc/angular12-template/actions\"\u003e\n    \u003cimg src=\"https://github.com/micro-lc/angular12-template/workflows/Main%20CI/badge.svg\" alt=\"Build Status\" /\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://coveralls.io/github/micro-lc/angular12-template?branch=main\"\u003e\n    \u003cimg src=\"https://coveralls.io/repos/github/micro-lc/angular12-template/badge.svg?branch=master\" alt=\"Coverage Status\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\nBoilerplate for an Angular 12 [micro-lc parcel](https://micro-lc.io/docs/guides/applications/parcels). It implements the\nnecessary features to work both standalone and in micro-lc.\n\n\u003e ⚠️ Warning: This repository is no longer maintained.\n\n## Local development\n\nFirst thing you need to do is install the dependencies running\n\n```sh\nnpm install\n```\n\nOnce you have the dependencies in place, run\n\n```sh\nnpm run start\n```\n\nto spin up the application.\n\nTests can be run with\n\n```sh\nnpm run coverage\n```\n\n## Use in micro-lc\n\nApplications build with this template can be used as-is in micro-lc as [parcels](https://micro-lc.io/docs/guides/applications/parcels).\n\nAn example configuration may be:\n\n```json5\n{\n  \"applications\": {\n    \"angular12-parcel\": {\n      \"integrationMode\": \"parcel\",\n      \"route\": \"./angular12-parcel/\", // \u003c-- must have the ending \"/\", should have the starting \".\"\n      \"entry\": \"/my-micro-lc-angular12-parcel/\", // \u003c-- must have the ending \"/\"\n      \"injectBase\": true // \u003c-- must be \"true\" if hash routing is not used\n    }\n  }\n}\n```\n\n### Internal routing\n\nThe internal routing of the application is already set up to work in micro-lc, meaning that the base url of the internal\nroutes is dynamically computed on the bases of micro-lc `\u003cbase\u003e`, as explained in the \n[official documentation](https://micro-lc.io/docs/guides/applications/parcels/#injectbase).\n\n\u003e **Note**\n\u003e\n\u003e If you whish to use a hash router in your application, change `app-routing.module.ts` file as such:\n\u003e \n\u003e ```diff\n\u003e - 17 imports: [RouterModule.forRoot(routes)],\n\u003e + 17 imports: [RouterModule.forRoot(routes, { useHash: true })],\n\u003e \n\u003e - 19 providers: [{ provide: APP_BASE_HREF, useValue: baseUrl() }]\n\u003e + 19\n\u003e ```\n\n### Assets\n\nTo correctly load assets in micro-lc, they should be put in `src/assets/` folder, and referenced using the `assetUrl`\n[pipe](https://angular.io/guide/glossary#pipe).\n\nA running example can be found in the `Home` component:\n\n```html\n\u003cimg alt=\"logo\" class=\"app-logo\" [src]=\"'angular-logo.svg' | assetUrl\" /\u003e\n```\n\n### `zone.js`\n\nAngular applications need [`zone.js`](https://github.com/angular/angular/tree/main/packages/zone.js) library to run, which\nis not bundled in micro-lc. Therefore, you need to import it as a `\u003cscript\u003e` in you micro-lc entrypoint **before** any\nmicro-lc related module.\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\n\u003chead\u003e\n\n  [...]\n\n  \u003cscript type=\"module\" src=\"https://cdn.jsdelivr.net/npm/zone.js@0.13.0/dist/zone.min.js\"\u003e\u003c/script\u003e\n\n  \u003cscript type=\"module\" src=\"https://cdn.jsdelivr.net/npm/@micro-lc/orchestrator@latest/dist/micro-lc.production.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\n[...]\n\n\u003c/html\u003e\n```\n\n\u003e **Warning**\n\u003e\n\u003e `zone.js` is also imported in the entrypoint of this application to make it work in development mode. Whereas it is\n\u003e advisable to remove it before bundling for production, the import it can be kept as long as the version matches the one\n\u003e imported in micro-lc.\n\n---\n\n## DevOps console\n\nThis walkthrough will explain you how to correctly create a [micro-lc](https://www.micro-lc.io) Angular 12 plugin from the DevOps Console.\n\n### Create a microservice\n\nAccess your [Mia-Platform DevOps Console](https://console.cloud.mia-platform.eu/login), create a new project, and go to the **Design** area.\n\nFrom the Design area of your project, select _Microservices_ and then create a new one, you have now reached [Mia-Platform Marketplace](https://docs.mia-platform.eu/docs/marketplace/overview_marketplace)!\nIn the marketplace you will see a set of Examples and Templates that can be used to set-up microservices with a predefined and tested function.\n\nFor this walkthrough select the following template: **micro-lc Angular 12 Plugin Template**.\nGive your microservice the name you prefer, in this walkthrough we'll refer to it with the following name: **micro-lc-angular12-plugin-template**. Then, fill the other required fields and confirm that you want to create a microservice.  \nA more detailed description on how to create a Microservice can be found in [Microservice from template - Get started](https://docs.mia-platform.eu/docs/development_suite/api-console/api-design/custom_microservice_get_started#1-microservice-creation) section of Mia-Platform documentation.\n\n### Expose an endpoint to your microservice\n\nIn order to access to your new microservice it is necessary to create an endpoint that targets it.  \nIn particular, in this walkthrough you will create an endpoint to your microservice *micro-lc-angular12-plugin-template*. To do so, from the Design area of your project select _Endpoints_ and then create a new endpoint.\nNow you need to choose a path for your endpoint and to connect this endpoint to your microservice. Give to your endpoint the following path: **/micro-lc-angular12**. Then, specify that you want to connect your endpoint to a microservice and, finally, select *micro-lc-angular12-plugin-template*.  \nStep 2 of [Microservice from template - Get started](https://docs.mia-platform.eu/docs/development_suite/api-console/api-design/custom_microservice_get_started#2-creating-the-endpoint) section of Mia-Platform documentation will explain in detail how to create an endpoint from the DevOps Console.\n\n### Save your changes\n\nAfter having created an endpoint to your microservice you should save the changes that you have done to your project in the DevOps console.  \nRemember to choose a meaningful title for your commit (e.g 'created service micro_lc_angular12_plugin'). After some seconds you will be prompted with a popup message which confirms that you have successfully saved all your changes.  \nStep 3 of [Microservice from template - Get started](https://docs.mia-platform.eu/docs/development_suite/api-console/api-design/custom_microservice_get_started#3-save-the-project) section of Mia-Platform documentation will explain how to correctly save the changes you have made on your project in the DevOps console.\n\n### Deploy\n\nOnce all the changes that you have made are saved, you should deploy your project through the DevOps Console. Go to the **Deploy** area of the DevOps Console.  \nOnce here select the environment and the branch you have worked on and confirm your choices clicking on the *deploy* button. When the deploy process is finished you will receive a pop-up message that will inform you.  \nStep 4 of [Microservice from template - Get started](https://docs.mia-platform.eu/docs/development_suite/api-console/api-design/custom_microservice_get_started#4-deploy-the-project-through-the-api-console) section of Mia-Platform documentation will explain in detail how to correctly deploy your project.\n\n### Try it\n\nNow, if you launch the following command on your terminal (remember to replace `\u003cYOUR_PROJECT_HOST\u003e` with the real host of your project):\n\n```shell\ncurl \u003cYOUR_PROJECT_HOST\u003e/micro-lc-angular12\n```\n\nyou should see a Angular-based webpage.\n\nCongratulations! You have successfully learnt how to use our _micro-lc Angular 12 Plugin_ Template on the DevOps Console!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmicro-lc%2Fangular12-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmicro-lc%2Fangular12-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmicro-lc%2Fangular12-template/lists"}