如何生成适用于企业虚拟机的Angular应用生产构建包并解决相关问题

Let’s tackle your questions one by one to get your app ready for the enterprise VM:

1. Will the production build reduce the dist folder size? #

Absolutely, your judgment is spot-on! The dist folder from a regular development build includes uncompressed code, full source maps for debugging, and extra development-only tools that bloat the size.

When you run ng build --prod, Angular CLI applies a suite of optimizations that drastically shrink the final bundle:

• Tree-shaking: Removes unused code from your app and third-party dependencies
• Code minification & obfuscation: Shrinks variable names, strips whitespace, and obscures code (for both size and security)
• Dead code elimination: Gets rid of debugging logs, development-only checks, and unused imports
• Bundle splitting: Breaks code into smaller chunks to improve loading performance

You’ll see a massive drop from your current 174MB—this optimized dist folder will be far more manageable for production deployment.

2. How to handle environment.ts and environment.prod.ts? #

No manual file swapping needed—Angular CLI handles this automatically based on your build configuration!

• environment.ts: This is for development work. Keep your local API URLs, debug flags, and any dev-specific settings here.
• environment.prod.ts: This file is automatically used when you run ng build --prod (or ng build --configuration production for Angular 12+). Make sure it has your enterprise VM’s production API endpoints, the default production: true flag, and any other production-only configurations.

Just ensure both files have the same structure (matching variable names) so the CLI can seamlessly replace development values with production ones during the build.

3. Fixing the 'router-outlet' is not a known element error #

This error pops up because the Angular Router module isn’t properly imported in the module where you’re using <router-outlet>. Here’s how to fix it:

• Root AppModule check: If <router-outlet> lives in your root app.component.html, confirm RouterModule.forRoot(routes) is added to the imports array of AppModule.ts:

  import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { RouterModule, Routes } from '@angular/router';
  
  const routes: Routes = [
    // Your route definitions go here
  ];
  
  @NgModule({
    declarations: [AppComponent],
    imports: [
      BrowserModule,
      RouterModule.forRoot(routes) // This line is critical!
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  

• Feature module check: If <router-outlet> is in a feature component, import RouterModule.forChild(routes) in that feature module’s imports array.
• Verify package installation: Ensure @angular/router is installed by running npm install @angular/router if you haven’t already.

Correct Production Build Workflow #

Let’s recap the right steps to generate your production-ready build package:

1. Double-check environment.prod.ts has all your production settings (API URLs, production: true, etc.)
2. Fix the router-outlet error by ensuring RouterModule is properly imported in the relevant module
3. Run only ng build --prod (or ng build --configuration production for Angular 12+)—this generates the optimized production build in the dist folder
4. Copy the entire dist folder to your enterprise virtual machine for deployment

Note: You don’t need to run ng serve --prod after building—ng serve starts a development server, which doesn’t modify or re-generate the dist folder. The production build is already ready in dist right after running ng build --prod.

内容的提问来源于stack exchange，提问作者Arvind Chourasiya