{"id":13601980,"url":"https://github.com/jprivet-dev/angular-stackblitz-webcontainer","last_synced_at":"2025-04-11T04:32:17.481Z","repository":{"id":218429378,"uuid":"700054309","full_name":"jprivet-dev/angular-stackblitz-webcontainer","owner":"jprivet-dev","description":"Sandbox to locally generate a project with Angular CLI and launch it online in a WebContainer on StackBlitz.","archived":false,"fork":false,"pushed_at":"2023-10-03T21:35:48.000Z","size":298,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-08-02T18:41:50.110Z","etag":null,"topics":["angular","stackbit","webcontainer"],"latest_commit_sha":null,"homepage":"https://stackblitz.com/edit/jprivet-dev-angular-stackblitz-webcontainer","language":"HTML","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/jprivet-dev.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}},"created_at":"2023-10-03T21:15:14.000Z","updated_at":"2024-01-19T02:51:17.000Z","dependencies_parsed_at":"2024-01-21T22:46:55.054Z","dependency_job_id":"3bef4f9d-6f51-467d-8440-02024b2b3871","html_url":"https://github.com/jprivet-dev/angular-stackblitz-webcontainer","commit_stats":null,"previous_names":["jprivet-dev/angular-stackblitz-webcontainer"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jprivet-dev%2Fangular-stackblitz-webcontainer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jprivet-dev%2Fangular-stackblitz-webcontainer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jprivet-dev%2Fangular-stackblitz-webcontainer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jprivet-dev%2Fangular-stackblitz-webcontainer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jprivet-dev","download_url":"https://codeload.github.com/jprivet-dev/angular-stackblitz-webcontainer/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223458755,"owners_count":17148513,"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","stackbit","webcontainer"],"created_at":"2024-08-01T18:01:11.053Z","updated_at":"2024-11-07T04:32:22.877Z","avatar_url":"https://github.com/jprivet-dev.png","language":"HTML","readme":"# Angular, StackBlitz \u0026 WebContainer\n\n[![Project release](https://flat.badgen.net/badge/release/v1602.0.0/blue)](https://github.com/jprivet-dev/angular-stackblitz-webcontainer/releases/tag/v1602.0.0)\n[![Angular release](https://flat.badgen.net/badge/angular/16.2.4/d93630)](https://github.com/angular/angular/releases/tag/16.2.4)\n[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz_small.svg)](https://stackblitz.com/edit/jprivet-dev-angular-stackblitz-webcontainer)\n\n## Presentation\n\nSandbox to locally generate a project with Angular CLI and launch it online in a WebContainer on StackBlitz.\n\n## Prerequisites\n\nBe sure to install the latest version of:\n\n- [NVM](https://github.com/nvm-sh/nvm) or [Node]( https://nodejs.org/en/download).\n- Global [Angular CLI](https://angular.io/cli) (if you want to regenerate the application).\n\n## Installation\n\n### The very first cloning of the project\n\n1 - Clone the project:\n\n```shell\ngit clone git@github.com:jprivet-dev/angular-stackblitz-webcontainer.git\n```\n\n2 - Go in the folder project:\n\n```shell\ncd angular-stackblitz-webcontainer\n```\n\n3 - Install the dependencies:\n\n```shell\nnpm install\n```\n\n4 - Launch the project:\n\n```shell\nng serve\n```\n\n5 - Go on http://localhost:4200/.\n\n![welcome.png](docs%2Fwelcome.png)\n\n### All in one command\n\n```shell\ngit clone git@github.com:jprivet-dev/angular-stackblitz-webcontainer.git;\\\ncd angular-stackblitz-webcontainer;\\\nnpm install;\\\nng serve\n```\n\n### The following times\n\n1 - Launch the project:\n\n```shell\nng serve\n```\n\n2 - Go on http://localhost:4200/\n\n3 - Stop the project with `Ctrl + C`\n\n## Regenerate a new Angular app\n\nLaunch the script:\n\n```shell\n. scripts/generate-root.sh\n```\n\nAnd commit all:\n\n```shell\ngit add .; git commit -m \"build(ng): regenerate a new angular app\"\n```\n\n## StackBlitz\n\n### Open the project in a WebContainer\n\nGo on https://stackblitz.com/edit/jprivet-dev-angular-stackblitz-webcontainer.\n\n### Create your own WebContainer API\n\n1 - On StackBlitz, [create a new WebContainer API with Node.js](https://stackblitz.com/fork/github/stackblitz/webcontainer-api-starter).\n\n2 - Click on the button **Connect repository**:\n\n![stackblitz-connect-repository.png](docs%2Fstackblitz-connect-repository.png)\n\n3 - In the popup **Connect new GitHub repository**, click on **import an existing repository**:\n\n![stackblitz-import-existing-repository.png](docs%2Fstackblitz-import-existing-repository.png)\n\n4 - In the popup **Import existing GitHub repository**, copy/Past in the field **Paste GitHub repository URL** the following URL:\n\n```\nhttps://github.com/jprivet-dev/angular-stackblitz-webcontainer\n```\n\n![stackblitz-past-github-repository.png](docs%2Fstackblitz-past-github-repository.png)\n\n5 - Click on the button **Import repository** to validate.\n\n6 - In the top menu, click on the button **Save**.\n\n7 - Refresh the complete page to reboot the WebContainer:\n\n![stackblitz-reboot.png](docs%2Fstackblitz-reboot.png)\n\n8 - If all went well, you can see the `✔ Compiled successfully.` message in the terminal and the application displayed.\n\n### Launching the project from GitHub\n\n\u003e /!\\ Do not launch the project on StackBlitz directly from GitHub.\n\nIf you [launch the project in StackBlitz](https://stackblitz.com/github/jprivet-dev/angular-stackblitz-webcontainer/) directly from GitHub (without WebContainer), you will have the following error in the console: \n\n```\nError: NG0908: In this configuration Angular requires Zone.js\n```\n\nAngular CLI locally generates by default the `main.ts` file without `zone.js`:\n\n```typescript\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... and put `zone.js` in the `polyfills` parameters of the `angular.json` file:\n\n```json\n\"polyfills\" : [\n    \"zone.js\"\n],\n```\n\nIn our case, it seems that the `polyfills` properties, in the `angular.json` file generated by Angular CLI, are not taken into account on **StackBlitz** and return an error.\n\nHowever, [StackBlitz's Angular starter](https://github.com/stackblitz/starters/tree/main/angular) provides a `main.ts` file that imports `zone.js`, with which it works very well without WebContainer:\n\n```typescript\n// main.ts\nimport 'zone.js/dist/zone';\nimport { Component } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\n\n...\n```\n\n\u003e I created [an issue on StackBlitz](https://github.com/stackblitz/core/issues/2366). To get around this problem, I'm going to use the WebContainer.\n\n## Semantic Versioning\n\n```\nv[ANGULAR MAJOR + ANGULAR MINOR].[MINOR].[PATCH]\n```\n\nExample, with Angular `15.1.6`:\n\n```\nv1501.0.0\n```\n\n## Resources\n\n- https://angular.io/\n- https://badgen.net/\n- StackBlitz:\n  - https://stackblitz.com/\n  - Launching projects from GitHub: https://developer.stackblitz.com/guides/integration/open-from-github\n  - https://github.com/stackblitz/starters/tree/main/angular\n  - https://github.com/stackblitz/webcontainer-api-starter\n  - Use StackBlitz WebContainers in Angular tutorials and examples: https://github.com/angular/angular/issues/42404\n  - https://blog.bitsrc.io/running-node-js-in-your-browser-with-webcontainers-48ada077518e\n  - https://angular.io/generated/live-examples/toh-pt6/stackblitz.html\n- https://semver.org/\n\n## Comments, suggestions?\n\nFeel free to make comments/suggestions to me in the [Git issues section](https://github.com/jprivet-dev/angular-stackblitz-webcontainer/issues).\n\n## License\n\nThis project is released under the [*MIT License*](https://github.com/jprivet-dev/angular-stackblitz-webcontainer/blob/main/LICENSE).\n","funding_links":[],"categories":["angular"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjprivet-dev%2Fangular-stackblitz-webcontainer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjprivet-dev%2Fangular-stackblitz-webcontainer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjprivet-dev%2Fangular-stackblitz-webcontainer/lists"}