在Angular 4中集成OnsenUI

时间:2017-06-04 14:42:43

标签: angular onsen-ui onsen-ui2

我真的很想在我的Angular 2(第4版)应用程序中集成OnsenUI。该项目是使用最新的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模板,这不会解决问题。

2 个答案:

答案 0 :(得分:1)

终于得到了解决方案: 只要OnsenUI不支持Angular 4,您需要将以下内容添加到ngOnInit() { this.id = this.activatedRoute.snapshot.params["id"]; }

.angular_cli.json

答案 1 :(得分:0)

完全相同的问题。但是,安装angular-cli依赖并更新.angular-cli.json对我没有用(原点,我的项目不是由angular-cli生成的)。 他们似乎正在研究Angular 4支持:

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

等等......