https://github.com/inushin/angularcustomelement
A Custom Element example build with Angular 17
https://github.com/inushin/angularcustomelement
Last synced: 6 months ago
JSON representation
A Custom Element example build with Angular 17
- Host: GitHub
- URL: https://github.com/inushin/angularcustomelement
- Owner: Inushin
- Created: 2024-04-26T13:27:26.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-04-26T13:29:18.000Z (over 1 year ago)
- Last Synced: 2025-02-05T16:18:18.610Z (8 months ago)
- Language: TypeScript
- Size: 110 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Angular 17 Custom Element (WebComponent) - Useful commands
An example of a Custom Element built using Angular 17.
## Local versions of the original project
- Angular CLI: 17.3.0
- Node: 20.12.2
- NPM: 10.5.0
## NPX or NPM?
You can use both, the difference is that when you run npx, you do not install the packages locally, you are running the binaries needed for, for example, generating a new project, building an app or just launching de dev server:
Using npx:
```bash
npx -p @angular/cli@ANGULAR-CLI-VERSION-YOU-WANT ng serve // Launched the app in dev mode
```
```bash
npx -p @angular/cli@ANGULAR-CLI-VERSION-YOU-WANT ng build // Builds the app for prod
```
Using npm. With Angular Cli installed locally. Run the script from the package.json with node or use Angular Cli:
```bash
npm install -g @angular/cli@17.3.0 // Install Angular CLI locally
```
```bash
ng serve // Launches the server in dev mode
```
```bash
ng build // Build the app for prod
```
## And now?
With the app builded, you can move the files from dist/custom-element/browse to another folder and inside that folder, run `python3 -m http.server 8000 -d .` or just run `python3 -m http.server 8000 -d dist/custom-element/browser` pointing to the folder where the builded files are added by default.