Angular 5.2升级至Angular 8后样式异常及路由报错问题求助

Hey there, let’s work through the problems you’re hitting after upgrading your Angular project from 5.2 to 8. I’ve broken down the issues into two main categories—styling glitches and routing errors—and outlined actionable fixes for each.

1. Styling Problems (Navbar & Button Rendering) #

Since you’re using Bootstrap with custom Sass overrides, the root cause is likely related to dependency compatibility or Angular CLI’s styling configuration changes between versions. Here’s what to check:

a. Bootstrap & Tether Dependency Conflict #

Bootstrap 4 dropped its dependency on Tether in favor of Popper.js a while back. Manually installing Tether after upgrading is probably causing style conflicts, especially since Angular 8 pairs best with Bootstrap 4.3.x (a stable, compatible version). Let’s fix this:

• Uninstall the old dependencies first:

  npm uninstall bootstrap tether
  

• Install the correct Bootstrap version and its required peer dependency:

  npm install bootstrap@4.3.1 popper.js --save
  

b. Sass Import Path & Global Style Order #

Angular CLI 8 changed how it resolves style imports, and the order of global styles matters for Sass overrides.

• Open your angular.json file and verify the styles array in the build configuration. Make sure Bootstrap’s CSS is loaded before your custom Sass file so your overrides take precedence:

  "styles": [
    "node_modules/bootstrap/dist/css/bootstrap.min.css",
    "src/styles.scss"
  ]
  

• In your custom Sass files, use the ~ prefix to reference Bootstrap’s Sass source (this tells Angular CLI to look in node_modules):

  // Instead of relative paths like ../node_modules/bootstrap/scss/bootstrap
  @import '~bootstrap/scss/bootstrap';
  
  // Your custom overrides go here
  .navbar {
    background-color: #your-custom-color;
  }
  

c. ViewEncapsulation Blocking Custom Styles #

If your component-specific Sass isn’t applying to Bootstrap elements, Angular’s default ViewEncapsulation might be preventing styles from leaking into third-party components. Try either:

• Add ::ng-deep to your component styles to bypass encapsulation (note: this is still supported in Angular 8, though marked for future deprecation):

  ::ng-deep .btn-custom {
    padding: 0.5rem 1.5rem;
    border-radius: 0.25rem;
  }
  

• Or disable ViewEncapsulation for the component entirely (use sparingly to avoid style leaks):

  import { Component, ViewEncapsulation } from '@angular/core';
  
  @Component({
    selector: 'app-navbar',
    templateUrl: './navbar.component.html',
    styleUrls: ['./navbar.component.scss'],
    encapsulation: ViewEncapsulation.None
  })
  export class NavbarComponent {}
  

2. Routing Errors on Navigation #

Angular 5 to 8 introduced several breaking changes to the Router API—most likely your routing configuration hasn’t been updated to match the new syntax or rules.

a. Lazy Loading Syntax Update #

Angular 8 deprecated the string-based lazy loading syntax (e.g., loadChildren: './auth/auth.module#AuthModule') in favor of dynamic import() statements. If you’re still using the old syntax, you’ll get errors. Fix it by switching to the function-based approach:

// Old (deprecated)
{
  path: 'auth',
  loadChildren: './auth/auth.module#AuthModule'
}

// New (Angular 8+ compatible)
{
  path: 'auth',
  loadChildren: () => import('./auth/auth.module').then(m => m.AuthModule)
}

If you prefer to keep the old syntax temporarily, add these flags to your tsconfig.json under compilerOptions:

"esModuleInterop": true,
"allowSyntheticDefaultImports": true

b. Route Configuration & Path Matching #

Double-check your route definitions for common mistakes:

• Ensure child routes are correctly nested under a parent route with children array.
• Use pathMatch: 'full' for root routes to avoid unintended route matches:

  {
    path: '',
    redirectTo: '/home',
    pathMatch: 'full'
  }
  

c. Deprecated Router APIs #

Angular 8 removed or deprecated some Router features from Angular 5. Check your route guards (CanActivate, CanLoad) and navigation code:

• If you’re using Router.navigate with relative paths, ensure you’re passing the relativeTo parameter correctly (it now requires an ActivatedRoute instance).
• Replace any deprecated methods like router.events.subscribe with the new observable patterns if needed.

Final Checklist #

Before wrapping up, run through these quick steps to rule out lingering issues:

• Delete your node_modules folder and lock file (package-lock.json or yarn.lock), then reinstall dependencies:

  rm -rf node_modules package-lock.json
  npm install
  

• Re-run the Angular CLI upgrade tool to ensure no configuration steps were missed:

  ng update @angular/cli @angular/core --force
  

  (The --force flag helps resolve dependency conflicts if they pop up.)

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