安装angular-cli(推荐使用淘宝镜像,不然忒慢)
cnpm install -g angular-cli
新建项目
ng new qz
测试环境搭建有无问题
cd qz
ng build
ng test
ng serve
输入localhost:4200
因为Polymer 是使用bower来管理依赖,所以我们的环境中还需要安装bower
cnpm install -g bower
安装完毕后,初始化bower
bower init
一路默认就行,需要注意的一点是,bower的安装目录是在bower_components,但是我们环境的静态资源目录是在src/assets下,所以需要修改bower_components的默认路径,修改方法为:
新建一个文件.bowerrc放在项目的根目录下,其内容为:
.bowerrc
{
"directory" : "src/assets/bower_components"
}
安装我们需要的Polymer组件
bower install –save paper-elements vaadin-combo-box
在app/index.html里添加以下代码(引用别的组件也是一样)
<head>
...
<script src="assets/bower_components/webcomponentsjs/webcomponents.min.js"></script>
<script>
window.Polymer = {
dom: 'shadow'
};
</script>
<link rel="import" href="assets/bower_components/paper-styles/color.html">
<link rel="import" href="assets/bower_components/paper-styles/typography.html">
<link rel="import" href="assets/bower_components/vaadin-combo-box/vaadin-combo-box.html">
<link rel="import" href="assets/bower_components/paper-input/paper-input.html">
</head>
这里我遇到一个坑,没有填平!!如下:
因为在angular启动之前需要进行Polymer的加载和注册,所以官方给出解决办法是:新建src/main-polymer.ts,内容为:
document.addEventListener('WebComponentsReady', () => {
require('./main.ts');
});
修改angular-cli.json
“main”: “main.ts”, 改成 “main”: “main-polymer.ts”
我的运行会报错,所以我并没有修改angular-cli.json
坑解决: angular-cli: 1.0.0-beta.22-1 变成 1.0.0-beta.21
安装polymer在angular2中的依赖
cnpm install –save @vaadin/angular2-polymer
在app.module.ts中引入
import { BrowserModule } from '@angular/platform-browser';
import { NgModule ,CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { PolymerElement } from '@vaadin/angular2-polymer';
@NgModule({
declarations: [
AppComponent,
PolymerElement('vaadin-combo-box'),
PolymerElement('paper-input')
],
imports: [
BrowserModule,
FormsModule,
HttpModule
],
providers: [],
bootstrap: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]//自定义样式的
})
export class AppModule { }
src/app/app.component.html
<h1>{{title}}</h1>
<vaadin-combo-box [label]="myLabel" [(value)]="myValue" [items]="myItems"></vaadin-combo-box>
<paper-input [(value)]="myValue"></paper-input>
src/app/app.component.ts
import { Component } from @angular/core';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
})
export class AppComponent {
title = 'app works!';
myLabel = 'Select a number';
myValue = '4';
myItems = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
}
src/index.html
<head>
...
<style is="custom-style">
body {
@apply(--paper-font-body1);
}
</style>
</head>
src/app/app.component.css
paper-input,
vaadin-combo-box {
background: var(--paper-grey-200);
padding: 8px;
}
官网地址:https://vaadin.com/docs/-/part/elements/angular2-polymer/ng-cli-webpack.html