0
JavaScript(ES5)でAngular 2アプリを作成していて、ライフサイクルフックがフレームワークによって呼び出されていません。角2ライフサイクルフックが呼び出されない(ES5 javascript)
添付されているもの:ngOnInit、index.html、appコンポーネント、appモジュール、main.jsを含むサンプルコンポーネント'all.min.js'はuglifyJSで生成されたすべての私のAngularアプリjsファイルのファイルです。
予期される結果は、コンポーネントのngOnInitが呼び出され、コンソールメッセージ 'ngOnInit'が出力されることになります。 Chromeコンソールにはメッセージは表示されません。 (簡潔にするために短縮)
のindex.html:
<!DOCTYPE html>
<html>
<body>
<app>Loading...</app>
<script src="/app/assets/javascript/angular/Rx.js"></script>
<script src="/app/assets/javascript/angular/core.umd.js"></script>
<script src="/app/assets/javascript/angular/common.umd.js"></script>
<script src="/app/assets/javascript/angular/compiler.umd.js"></script>
<script src="/app/assets/javascript/angular/platform-browser.umd.js"></script>
<script src="/app/assets/javascript/angular/platform-browser-dynamic.umd.js"></script>
<script src="/app/assets/javascript/angular/forms.umd.js"></script>
<script src="/app/assets/javascript/angular/shim.min.js"></script>
<script src="/app/assets/javascript/angular/Reflect.js"></script>
<script src="/app/assets/javascript/angular/zone.js"></script>
<script src="/app/assets/javascript/angular/system.js"></script>
<script src='/app/ng_app/all.min.js'></script>
</body>
</html>
app.component.js:
(function(app) {
app.AppComponent =
ng.core.Component({
selector: 'app',
template: '<brief></brief>'
})
.Class({
constructor: function() {
}
});
})(window.app || (window.app = {}));
app.module.js:
(function(app) {
app.AppModule =
ng.core.NgModule({
imports: [ng.platformBrowser.BrowserModule, ng.forms.FormsModule],
declarations: [app.AppComponent,
app.BriefComponent
],
bootstrap: [app.AppComponent]
})
.Class({
constructor: function() {}
});
})(window.app || (window.app = {}));
試料成分(短いです成分):
(function(app) {
app.BriefComponent =
ng.core.Component({
selector: 'brief',
templateUrl: 'ng_app/brief/brief.component.html'
]
})
.Class({
constructor: function() {
},
ngOnInit: function() {
console.log('ngOnInit brief');
}
});
})(window.app || (window.app = {}));
main.js:
(function(app) {
document.addEventListener('DOMContentLoaded', function() {
ng.platformBrowserDynamic
.platformBrowserDynamic()
.bootstrapModule(app.AppModule);
});
})(window.app || (window.app = {}));