https://github.com/pfecht/generator-angular-polymer-demo
A project based on angular-cli which demonstrates the usage of https://github.com/pfecht/generator-angular-polymer
https://github.com/pfecht/generator-angular-polymer-demo
angular-polymer-demo generator-angular-polymer
Last synced: over 1 year ago
JSON representation
A project based on angular-cli which demonstrates the usage of https://github.com/pfecht/generator-angular-polymer
- Host: GitHub
- URL: https://github.com/pfecht/generator-angular-polymer-demo
- Owner: pfecht
- Created: 2017-04-07T11:25:05.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-04-12T07:53:18.000Z (about 9 years ago)
- Last Synced: 2025-02-08T16:30:10.497Z (over 1 year ago)
- Topics: angular-polymer-demo, generator-angular-polymer
- Language: TypeScript
- Homepage:
- Size: 24.4 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Demo for generator-angular-polymer
This project demonstrates the basic usage of [generator-angular-polymer](https://github.com/pfecht/generator-angular-polymer) for [Angular CLI](https://github.com/angular/angular-cli) version 1.0.0.
## Getting started
1. Install [generator-angular-polymer](https://github.com/pfecht/generator-angular-polymer).
2. Get the code: ```git clone https://github.com/pfecht/generator-angular-polymer-demo.git```.
3. Install the dependencies: run ```npm install```.
4. Install Polymer elements: run `bower install` in `src/assets/`
5. Run the generator: `yo angular-polymer` in the project root directory.
6. Run `npm start` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
## Project Structure
### Integration of Polymer
Polymer and its elements are located in `src/assets/`:
1. The core library and external elements are managed with bower.
2. `components/` contains custom Polymer elements.
3. `elements.html` sums up all Polymer elements which should be part of the application.
To integrate them in angular-cli, `elements.html` is included in two files:
1. `src/index.html` to add them to the Angular application
2. `.yo-rc.json` to configure them for the generator.
Finally, the `angular-cli.json` has been changed to add the polyfill:
```
{
...
"apps": [
{
...
"scripts": [
"assets/bower_components/webcomponentsjs/webcomponents-lite.min.js"
]
...
}
```
### Integration of generator-angular-polymer
The generator is configured in `.yo-rc-json` and automatically recreates the directives since he is part of the `package.json`:
```
"scripts": {
"ng": "ng",
"start": "yo angular-polymer && ng serve",
...
},
```
`src/app/shared/polymer-elements/` contains the generated directives.
`AppModule` (src/app/app.module.ts) includes the generated directives:
```
...
import { POLYMER_ELEMENTS } from './shared/polymer-elements/index';
@NgModule({
declarations: [
...
POLYMER_ELEMENTS
],
...
})
export class AppModule { }
```
## License
Apache 2.0