├── .gitignore
├── README.md
├── index.html
├── package.json
├── src
├── angular
│ ├── app.component.ts
│ └── app.module.ts
└── ngx-elements
│ ├── app.service.ts
│ └── app.ts
├── tools
├── clean.ts
└── tsconfig.json
├── tsconfig.json
├── vite.config.ts
└── yarn.lock
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | .envrc
4 | default.nix
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # vite-angular-experiment
2 | Experiment Angular (Ivy) with Vite
3 |
4 | Getting Started
5 | ------------
6 | * Install dependencies
7 | ```
8 | git clone https://github.com/aelbore/vite-angular-experiment.git
9 | yarn install
10 | ```
11 |
12 | Example
13 | ------------
14 | * Run the Angular with `ngx-elements` without `NgModule`
15 | - `yarn serve` - run into browser `http://localhost:3000`
16 | * Run the Angular with `NgModule`
17 | - change the `script` tag in `index.html`
18 | ```html
19 |
20 | ```
21 | - `yarn serve` - run into browser `http://localhost:3000`
22 |
23 | Note
24 | ------------
25 | > Currently it is only supports single component (inline template and styles)
26 | > In Angular with NgModule, common modules are not working
27 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Vite Angular
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vite-angular-experiment",
3 | "version": "1.0.0",
4 | "description": "Experiment Angular (Ivy) with Vite",
5 | "scripts": {
6 | "postinstall": "ngcc && yarn clean",
7 | "clean": "ts-node --project tools/tsconfig.json tools/clean.ts",
8 | "serve": "vite"
9 | },
10 | "repository": {
11 | "type": "git",
12 | "url": "git+https://github.com/aelbore/vite-angular-experiment.git"
13 | },
14 | "keywords": [],
15 | "author": "",
16 | "license": "ISC",
17 | "bugs": {
18 | "url": "https://github.com/aelbore/vite-angular-experiment/issues"
19 | },
20 | "homepage": "https://github.com/aelbore/vite-angular-experiment#readme",
21 | "devDependencies": {
22 | "@angular-devkit/build-optimizer": "^0.1102.6",
23 | "@angular/compiler": "^11.2.7",
24 | "@angular/compiler-cli": "^11.2.7",
25 | "@types/node": "^14.14.37",
26 | "aria-fs": "^0.7.3",
27 | "rollup-plugin-ngc": "^0.1.1",
28 | "typescript": "4.0.2",
29 | "vite": "^2.1.3"
30 | },
31 | "dependencies": {
32 | "@angular/common": "^11.2.7",
33 | "@angular/core": "^11.2.7",
34 | "@angular/platform-browser": "^11.2.7",
35 | "@angular/platform-browser-dynamic": "^11.2.7",
36 | "ngx-elements": "^0.4.0",
37 | "rxjs": "6.6.7",
38 | "ts-node": "^9.1.1",
39 | "tslib": "^2.1.0",
40 | "zone.js": "^0.11.4"
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/src/angular/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from "@angular/core"
2 |
3 | @Component({
4 | selector: 'hello-world',
5 | template: `
6 |
7 |
Hello {{ message }}
8 |
9 | `,
10 | styles: [ `
11 | h1 {
12 | color: green;
13 | }
14 | `]
15 | })
16 | export class AppComponent {
17 | message = 'World'
18 | }
--------------------------------------------------------------------------------
/src/angular/app.module.ts:
--------------------------------------------------------------------------------
1 | import 'zone.js/dist/zone'
2 |
3 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
4 |
5 | import { BrowserModule } from '@angular/platform-browser'
6 | import { NgModule } from '@angular/core'
7 |
8 | import { AppComponent } from './app.component'
9 |
10 | @NgModule({
11 | imports: [ BrowserModule ],
12 | declarations: [ AppComponent ],
13 | bootstrap: [ AppComponent ]
14 | })
15 | export class AppModule { }
16 |
17 | platformBrowserDynamic()
18 | .bootstrapModule(AppModule)
19 | .catch(err => console.error(err));
--------------------------------------------------------------------------------
/src/ngx-elements/app.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core'
2 | import { of } from 'rxjs'
3 |
4 |
5 | @Injectable({
6 | providedIn: 'root'
7 | })
8 | export class AppService {
9 |
10 | getNames() {
11 | return of([ 'John', 'Jane', 'Joe' ])
12 | }
13 |
14 | }
--------------------------------------------------------------------------------
/src/ngx-elements/app.ts:
--------------------------------------------------------------------------------
1 | import '@angular/compiler'
2 |
3 | import { Component, ViewEncapsulation } from "@angular/core"
4 | import { NgForOf, AsyncPipe } from "@angular/common"
5 |
6 | import { renderCustomElement } from 'ngx-elements'
7 | import { AppService } from "./app.service"
8 |
9 | import { Observable } from 'rxjs'
10 |
11 | @Component({
12 | selector: 'hello-world',
13 | template: `
14 |
15 |
Hello {{ message }}
16 |
19 |