angular2 +Polymer 环境搭建

来源：互联网发布：用友软件主要客户编辑：程序博客网时间：2024/05/01 12:34

安装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

0 0