当前位置: 首页 > 工具软件 > ngx-ui > 使用案例 >

angular2+安装onsen-ui

严稳
2023-12-01

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

 类似资料: