Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fathyb/parcel-plugin-angular
Complete Angular support for Parcel
https://github.com/fathyb/parcel-plugin-angular
angular aot jit parcel
Last synced: 12 days ago
JSON representation
Complete Angular support for Parcel
- Host: GitHub
- URL: https://github.com/fathyb/parcel-plugin-angular
- Owner: fathyb
- License: mit
- Created: 2017-12-29T08:19:56.000Z (almost 7 years ago)
- Default Branch: develop
- Last Pushed: 2018-01-14T18:39:43.000Z (almost 7 years ago)
- Last Synced: 2024-10-14T12:28:13.304Z (26 days ago)
- Topics: angular, aot, jit, parcel
- Language: TypeScript
- Homepage:
- Size: 612 KB
- Stars: 29
- Watchers: 4
- Forks: 2
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-ccamel - fathyb/parcel-plugin-angular - Complete Angular support for Parcel (TypeScript)
- awesome-parcel - Angular - Angular support. (Plugins / Frameworks)
README
# parcel-plugin-angular
Complete Angular support for Parcel and TypeScript.
## Features
- [`parcel-plugin-typescript` features](https://github.com/fathyb/parcel-plugin-typescript#features)
- AOT compilation : using the official Angular compiler for smaller and faster applications.
- Lazy Loading : the plugin automagically splits your Angular modules in multiple JavaScript files with Parcel when you use lazy routes.
- Template and style parsing : your templates and style are processed by Parcel to find and replace resources.
- Transformations (based on [`angular/angular-cli`](https://github.com/angular/angular-cli) transformers) :
- It removes all your Angular decorators in AOT mode for smaller bundles
- It replaces JIT bootstrap code with AOT when it's used. You can keep one main file using the `@angular/platform-browser-dynamic` module, see [Entry file](#entry-file)
## Prerequisites
- `@angular/compiler` and `@angular/compiler-cli` should be installed
- `parcel-plugin-typescript` should not be installed
## Installation
`yarn add parcel-plugin-angular --dev`
or
`npm install parcel-plugin-angular --save-dev`
## Configuration
You can pass a `parcelAngularOptions` object in your `tsconfig.json`, here are the defaults :
```js
{
"compilerOptions": { ... },
// the plugin options
"parcelAngularOptions": {
// What compiler should we use when watching or serving
"watch": "jit",
// What compiler should we use when building (parcel build)
"build": "aot"
}
}
```
## Entry file
To make it easy to switch between JIT and AOT mode we automatically translate your JIT bootstrap code to AOT if you are using the AOT compiler.
```ts
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'
import {enableProdMode} from '@angular/core'
import {AppModule} from './app/app.module'
if(process.env.NODE_ENV === 'production') {
enableProdMode()
}
platformBrowserDynamic().bootstrapModule(AppModule)
```
will be transformed to :
```ts
import {platformBrowser} from '@angular/platform-browser'
import {enableProdMode} from '@angular/core'
import {AppModuleNgFactory} from './app/app.module.ngfactory'
if(process.env.NODE_ENV === 'production') {
enableProdMode()
}
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory)
```
## Known issues
- AOT mode is highly experimental
- Lazy-loading does not work in JIT