angular2+安装onsen-ui

先按照onseun-ui官方文档来(不行)：

1. 使用npm安装Onsen UI Core（onsenui）和Angular（ngx-onsenui）的绑定库

    npm install onsenui ngx-onsenui --save

2. 在app.module.ts中添加OnsenModule、加载CUSTOM_ELEMENTS_SCHEMA

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';


import { OnsenModule } from 'ngx-onsenui';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';


import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    OnsenModule,//添加onsenui
  ],
  providers:[],
  bootstrap: [AppComponent],
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA,//添加onsenui
  ]
})
export class AppModule {}

3. 加载css文件 ，在.angular-cli.json中添加：

"styles": [
        "node_modules/onsenui/css/onsenui.css",
        "node_modules/onsenui/css/onsen-css-components.css",
        "styles.css"
      ],

然后报了一堆错：

ERROR in multi ./src/node_modules/onsenui/css/onsenui.css ./src/node_modules/onsenui/css/onsen-css-components.css ./src/styles.css
Module not found: Error: Can't resolve 'D:\angularproject\MyNgProject\src\node_modules\onsenui\css\onsen-css-components.css' in 'D:\angularproject\MyNgProject\node_modules\@angular\cli\models\webpack-configs'
resolve 'D:\angularproject\MyNgProject\src\node_modules\onsenui\css\onsen-css-components.css' in 'D:\angularproject\MyNgProject\node_modules\@angular\cli\models\webpack-configs'
  using description file: D:\angularproject\MyNgProject\node_modules\@angular\cli\package.json (relative path: ./models/webpack-configs)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: D:\angularproject\MyNgProject\node_modules\@angular\cli\package.json (relative path: ./models/webpack-configs)
    using description file: D:\angularproject\MyNgProject\package.json (relative path: ./src/node_modules/onsenui/css/onsen-css-components.css)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        D:\angularproject\MyNgProject\src\node_modules\onsenui\css\onsen-css-components.css doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        D:\angularproject\MyNgProject\src\node_modules\onsenui\css\onsen-css-components.css.ts doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        D:\angularproject\MyNgProject\src\node_modules\onsenui\css\onsen-css-components.css.js doesn't exist
      as directory
        D:\angularproject\MyNgProject\src\node_modules\onsenui\css\onsen-css-components.css doesn't exist
[D:\angularproject\MyNgProject\src\node_modules\onsenui\css\onsen-css-components.css]
[D:\angularproject\MyNgProject\src\node_modules\onsenui\css\onsen-css-components.css.ts]
[D:\angularproject\MyNgProject\src\node_modules\onsenui\css\onsen-css-components.css.js]
[D:\angularproject\MyNgProject\src\node_modules\onsenui\css\onsen-css-components.css]
 @ multi ./src/node_modules/onsenui/css/onsenui.css ./src/node_modules/onsenui/css/onsen-css-components.css ./src/styles.css
ERROR in multi ./src/node_modules/onsenui/css/onsenui.css ./src/node_modules/onsenui/css/onsen-css-components.css ./src/styles.css
Module not found: Error: Can't resolve 'D:\angularproject\MyNgProject\src\node_modules\onsenui\css\onsenui.css' in 'D:\angularproject\MyNgProject\node_modules\@angular\cli\models\webpack-configs'
resolve 'D:\angularproject\MyNgProject\src\node_modules\onsenui\css\onsenui.css' in 'D:\angularproject\MyNgProject\node_modules\@angular\cli\models\webpack-configs'
  using description file: D:\angularproject\MyNgProject\node_modules\@angular\cli\package.json (relative path: ./models/webpack-configs)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: D:\angularproject\MyNgProject\node_modules\@angular\cli\package.json (relative path: ./models/webpack-configs)
    using description file: D:\angularproject\MyNgProject\package.json (relative path: ./src/node_modules/onsenui/css/onsenui.css)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        D:\angularproject\MyNgProject\src\node_modules\onsenui\css\onsenui.css doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        D:\angularproject\MyNgProject\src\node_modules\onsenui\css\onsenui.css.ts doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        D:\angularproject\MyNgProject\src\node_modules\onsenui\css\onsenui.css.js doesn't exist
      as directory
        D:\angularproject\MyNgProject\src\node_modules\onsenui\css\onsenui.css doesn't exist
[D:\angularproject\MyNgProject\src\node_modules\onsenui\css\onsenui.css]
[D:\angularproject\MyNgProject\src\node_modules\onsenui\css\onsenui.css.ts]
[D:\angularproject\MyNgProject\src\node_modules\onsenui\css\onsenui.css.js]
[D:\angularproject\MyNgProject\src\node_modules\onsenui\css\onsenui.css]
 @ multi ./src/node_modules/onsenui/css/onsenui.css ./src/node_modules/onsenui/css/onsen-css-components.css ./src/styles.css

解决：

按照头头的来：

1. 将第2步的

import { OnsenModule } from 'ngx-onsenui';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

改为

import { OnsenModule, CUSTOM_ELEMENTS_SCHEMA } from 'ngx-onsenui';

2. 去掉第三步，改在为style.css中添加

@import '../node_modules/onsenui/css/onsenui.css';
@import '../node_modules/onsenui/css/onsen-css-components.css'

3. ok!