在 Angular 4 中集成 OnsenUI

Question

我真的很难将 OnsenUI 集成到我的 Angular 2（版本 4）应用程序中。该项目是使用最新的 Angular CLI 生成的。看来 OnsenUI 文档不是最新的。

所以如果添加

import {OnsenModule} from 'angular2-onsenui';
import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
.
.
.
@NgModule({
imports: [
    OnsenModule,
    BrowserModule
],
schemas: [CUSTOM_ELEMENTS_SCHEMA]

如文档中所述： https://onsen.io/v2/docs/guide/angular2/

我收到以下错误：

Uncaught ReferenceError: ons is not defined
at Object../node_modules/angular2-onsenui/dist/src/ons/notification.js (notification.js:5)
at __webpack_require__ (bootstrap 43794b3…:54)
at Object../node_modules/angular2-onsenui/dist/src/angular2-onsenui.js (angular2-onsenui.js:16)
at __webpack_require__ (bootstrap 43794b3…:54)
at Object../src/app/app.module.ts (app.component.ts:12)
at __webpack_require__ (bootstrap 43794b3…:54)
at Object../src/main.ts (environment.ts:8)
at __webpack_require__ (bootstrap 43794b3…:54)
at Object.2 (main.ts:12)
at __webpack_require__ (bootstrap 43794b3…:54)
./node_modules/angular2-onsenui/dist/src/ons/notification.js @ 
notification.js:5
__webpack_require__ @ bootstrap 43794b3…:54
./node_modules/angular2-onsenui/dist/src/angular2-onsenui.js @     angular2-onsenui.js:16
__webpack_require__ @ bootstrap 43794b3…:54
./src/app/app.module.ts @ app.component.ts:12
__webpack_require__ @ bootstrap 43794b3…:54
./src/main.ts @ environment.ts:8
__webpack_require__ @ bootstrap 43794b3…:54
2 @ main.ts:12
__webpack_require__ @ bootstrap 43794b3…:54
webpackJsonpCallback @ bootstrap 43794b3…:25
(anonymous) @ main.bundle.js:1

我不想使用monaca模板，这不能解决问题。

Answer 1

终于得到解决方法：只要OnsenUI不支持Angular4，就需要在.angular_cli.json中加入如下内容：

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

Answer 2

完全一样的问题。但是，安装 angular-cli 依赖项并更新 .angular-cli.json 对我不起作用（最初，我的项目不是由 angular-cli 生成的） . 他们似乎正在努力 Angular 4 支持：

https://github.com/OnsenUI/OnsenUI/tree/angular4-support

拭目以待...

在 Angular 4 中集成 OnsenUI

Integrate OnsenUI in Angular 4

onsen-ui

onsen-ui2

angular