You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

执行ng build --prod失败,疑为第三方库打包问题求助

Fixing Angular 5 Production Build Errors with @ng-bootstrap

Hey there, let's work through this frustrating production build issue you're hitting with @ng-bootstrap and Angular 5. I've seen this exact problem before, so here's what's going on and how to fix it:

The Context

When running the production build command:

ng build --prod

With these package versions:

"@angular-devkit/core": "^0.4.2", 
"@angular-devkit/schematics": "^0.4.2", 
"@angular/animations": "^5.2.9", 
"@angular/cdk": "^5.2.4", 
"@angular/common": "^5.2.6", 
"@angular/compiler": "^5.2.6", 
"@angular/core": "^5.2.6", 
"@angular/forms": "^5.2.6", 
"@angular/http": "^5.2.6", 
"@angular/platform-browser": "^5.2.6", 
"@angular/platform-browser-dynamic": "^5.2.6", 
"@angular/router": "^5.2.6", 
"@ng-bootstrap/ng-bootstrap": "^1.1.0"

You're getting errors like this for multiple @ng-bootstrap components:

ERROR in ./node_modules/@ng-bootstrap/ng-bootstrap/alert/alert.ngfactory.js 
Module build failed: Error: ./node_modules/@ng-bootstrap/ng-bootstrap/alert/alert.ngfactory.js is missing from the TypeScript compilation. 
Please make sure it is in your tsconfig via the 'files' or 'include' property. 
The missing file seems to be part of a third party library. 
TS files in published libraries are often a sign of a badly packaged library.

Why This Happens

Angular's production build uses AOT (Ahead-of-Time) compilation by default, which generates .ngfactory.js files for components. The issue here is that @ng-bootstrap v1.1.0's packaging isn't playing nicely with Angular 5's AOT compiler—either the factory files aren't being generated correctly, or your TypeScript config isn't including them in the compilation.

Step-by-Step Fixes

1. Update Your TypeScript Config

First, make sure your tsconfig.json includes the necessary @ng-bootstrap files. Open up the file and adjust the include array to cover the library's files:

{
  "include": [
    "src/**/*",
    "node_modules/@ng-bootstrap/ng-bootstrap/**/*.ts",
    "node_modules/@ng-bootstrap/ng-bootstrap/**/*.ngfactory.ts"
  ]
}

If you're using a tsconfig.app.json (common in Angular CLI projects), add those paths there instead.

2. Clean Cache & Reinstall Dependencies

Corrupted node modules or cached build files often cause these kinds of issues. Let's wipe and refresh everything:

# Delete node_modules and lock file
rm -rf node_modules package-lock.json
# Reinstall dependencies
npm install
# Clear Angular's build cache
ng clean
# Try the production build again
ng build --prod

3. Upgrade @ng-bootstrap to the Latest v1.x Version

@ng-bootstrap v1.1.0 has some known packaging quirks with Angular 5. The latest version in the v1 branch (1.1.2) fixes many of these:

npm install @ng-bootstrap/ng-bootstrap@1.1.2 --save

After upgrading, run the clean/build steps above again.

4. Temporary: Disable AOT (Not Recommended for Production)

If all else fails, you can bypass AOT to get a working build, but note this will hurt your app's performance in production:

ng build --prod --aot=false

Use this only as a last resort while you troubleshoot the root cause.

Final Notes

Most of the time, steps 2 and 3 will resolve this issue—cleaning dependencies and upgrading to a more stable @ng-bootstrap version fixes the packaging mismatch with Angular 5's AOT compiler.

内容的提问来源于stack exchange,提问作者Tom Halliley

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.27 06:48:55