#####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!