无法使用angular加载@ ng-bootstrap / ng-bootstrap [英] Can't load @ng-bootstrap/ng-bootstrap with angular
问题描述
我正在尝试使用带角度和电子的@ ng-bootstrap / ng-bootstrap，使用gulp。
I'm trying to use @ng-bootstrap/ng-bootstrap with angular and electron, using gulp.
这是我的renderer.ts：
this is my renderer.ts:
/**
* Angular Module declaration
*/
let BrowserModule = require('@angular/platform-browser').BrowserModule;
let UpgradeModule = require('@angular/upgrade/static').UpgradeModule;
let NgbModule = require('@ng-bootstrap/ng-bootstrap').NgbModule;
let NgModule = require('@angular/core').NgModule;
let platformBrowserDynamic = require('@angular/platform-browser-dynamic').platformBrowserDynamic;
require('zone.js');
@NgModule({
imports: [
NgbModule.forRoot(),
BrowserModule,
UpgradeModule
]
})
export class AppModule {
constructor() { }
ngDoBootstrap() {
}
}
let angular = require('angular');
// When DOM is loaded
angular.element(document).ready(function () {
// start up the Angular module "AppModule" in AngularJS
// platformBrowserDynamic().bootstrapModule(AppModule, { ngZone: 'noop'})
platformBrowserDynamic().bootstrapModule(AppModule)
.then((platformRef) => {
const upgrade = platformRef.injector.get(UpgradeModule);
upgrade.bootstrap(document, ['app']);
});
});
我的index.html：
And my index.html:
<!DOCTYPE html> <html> <body>
<script>
require('./dist/renderer.js')
</script>
<button ngbTooltip="hello">Hello</button> </body> </html>
我在尝试加载NgbModules时收到此错误
I'm getting this error when trying to load NgbModules
我在这里失去了什么？
PD：我没有使用NgbAlert在我的代码的任何地方。
PD: I'm not using NgbAlert anywhere on my code.
错误：
未捕获错误：可以'解析NgbAlert的所有参数:(？）。语法错误
（C：\Users\Manu \Documents\electron-quick-start-master\\\
ode_modules\@angular\compiler\bundles\compiler.umd.js：sourcemap： 301）
at CompileMetadataResolver._getDependenciesMetadata（C：\ Users \ Manu \Documents\ electron-quick-start-master\\\
ode_modules\@angular\compiler\bundles\compiler.umd。 js：sourcemap：10893）
at CompileMetadataResolver._getTypeMetadata（C：\ Users \Manu \Documents\electron-quick-start-master\\\
ode_modules \ @ angular\compiler\bundles \ compile.umd.js：sourcemap：10786）
at CompileMetadataResolver.getNonNormalizedDirectiveMetadata（C：\ Users \Manu \Documents\ electronon-quick-start-master \\\
ode_modules \ @ angular\compiler \\ \\ bundles\compiler.umd.js：sourcemap：10405）
at CompileMetadataResolver._getEntryComponentMetadata（C：\ Users \Manu \ Document \\electron-quick-start-master\\\
ode_modules\@angular\compiler\bundles\compiler.umd.js：sourcemap：10989）
at C：\ Users \ Manu \ Documentocu \\ eleon-quick-start-master\\\
ode_modules\@angular\compiler\bundles\compiler.umd.js：sourcemap：10638
at Array.map（）
at CompileMetadataResolver.getNgModuleMetadata （C：\ Users \Manu \Documents\electron-quick-start-master\\\
ode_modules\@angular\compiler\bundles\compiler.umd.js：sourcemap：10638）
在CompileMetadataResolver.getNgModuleSummary（C：\Users\Manu \Documentâ€
at C：\ Users \Manu \Documents\electron-quick-start-master\\\
ode_modules\@angular\compiler\bundles\compiler.umd.js：sourcemap：10551
Uncaught Error: Can't resolve all parameters for NgbAlert: (?). at syntaxError (C:\Users\Manu\Documents\electron-quick-start-master\node_modules\@angular\compiler\bundles\compiler.umd.js:sourcemap:301) at CompileMetadataResolver._getDependenciesMetadata (C:\Users\Manu\Documents\electron-quick-start-master\node_modules\@angular\compiler\bundles\compiler.umd.js:sourcemap:10893) at CompileMetadataResolver._getTypeMetadata (C:\Users\Manu\Documents\electron-quick-start-master\node_modules\@angular\compiler\bundles\compiler.umd.js:sourcemap:10786) at CompileMetadataResolver.getNonNormalizedDirectiveMetadata (C:\Users\Manu\Documents\electron-quick-start-master\node_modules\@angular\compiler\bundles\compiler.umd.js:sourcemap:10405) at CompileMetadataResolver._getEntryComponentMetadata (C:\Users\Manu\Documents\electron-quick-start-master\node_modules\@angular\compiler\bundles\compiler.umd.js:sourcemap:10989) at C:\Users\Manu\Documents\electron-quick-start-master\node_modules\@angular\compiler\bundles\compiler.umd.js:sourcemap:10638 at Array.map () at CompileMetadataResolver.getNgModuleMetadata (C:\Users\Manu\Documents\electron-quick-start-master\node_modules\@angular\compiler\bundles\compiler.umd.js:sourcemap:10638) at CompileMetadataResolver.getNgModuleSummary (C:\Users\Manu\Documents\electron-quick-start-master\node_modules\@angular\compiler\bundles\compiler.umd.js:sourcemap:10464) at C:\Users\Manu\Documents\electron-quick-start-master\node_modules\@angular\compiler\bundles\compiler.umd.js:sourcemap:10551
推荐答案
最后我可以解决它！
我添加了require（'reflect-metadata'） ; 在我的renderer.ts之上。
I added require('reflect-metadata'); on top of my renderer.ts .
require('reflect-metadata');
let BrowserModule = require('@angular/platform-browser').BrowserModule;
let UpgradeModule = require('@angular/upgrade/static').UpgradeModule;
let NgbModule = require('@ng-bootstrap/ng-bootstrap').NgbModule;
将其放置在其他位置并不能使其正常工作。
Placing it somewhere else doesn't make it work.
经过一番调查后，我发现问题是由于JIT编译器在尝试加载ng-bootstrap模块时出现反射错误引起的。
After some investigation, I came with that the problem was caused due to a reflection error within the JIT compiler when trying to load ng-bootstrap modules.
我希望这可以帮助其他人。
I hope this could help anyone else.
这篇关于无法使用angular加载@ ng-bootstrap / ng-bootstrap的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
![无法解析NgbAlert的所有参数： （？）](\"https://i.stack.imgur.com/NZBdF.png\"){kind=link}