Angular 2 Lifecycle Hooks not called (ES5 javascript)
Question
I'm writing an Angular 2 app in JavaScript (ES5) and my lifecycle hooks are not being invoked by the framework.
Attached are: a sample component with ngOnInit, index.html, app component, app module, main.js. 'all.min.js' is a file of all my Angular app js files, generated with uglifyJS.
The expected outcome is for ngOnInit of the component to be invoked and console message 'ngOnInit' to be printed. There is no message printed in Chrome console.
index.html (shortened for brevity):
<!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 = {}));
sample component (brief component):
(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 = {}));
1 answers
solution1
1 2016-12-15 06:38:35
原来，在将生命周期挂钩添加到我的代码后，我只是忽略了重新生成all.min.js文件。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.