angular2+安装onsen-ui

13 篇文章 0 订阅
3 篇文章 0 订阅

先按照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!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值