执行ng build --prod失败,疑为第三方库打包问题求助
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

