Angular/Node项目编译失败求助：webpack及AngularFire2报错排查

Hi there, let's break down and fix these two compilation issues you're facing with your Angular 5 project!

1. Resolving the CSS-Loader Syntax Error with Bootstrap.js #

That error means your build process is mistakenly trying to process Bootstrap's JavaScript file with css-loader—which only handles CSS files, hence the syntax confusion. Here's how to fix it:

• Check your styles.css import
  Open ./src/styles.css and look for any lines importing Bootstrap's JS file. You might have accidentally written something like:

  @import '../node_modules/bootstrap/dist/js/bootstrap.js';
  

  Replace that with the correct CSS import:

  @import '~bootstrap/dist/css/bootstrap.css';
  

  The ~ tells Angular CLI to resolve the path directly from your node_modules folder.

• Verify Angular CLI styles configuration
  Since you're on Angular CLI 1.6.3, open .angular-cli.json and check the styles array—make sure it only includes CSS files, not JS:

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

  If you need Bootstrap's JavaScript functionality, add it to the scripts array instead:

  "scripts": [
    "../node_modules/bootstrap/dist/js/bootstrap.js"
  ]
  

2. Fixing AngularFire2 Type Errors #

These TypeScript errors are almost always caused by version mismatches between AngularFire2, Firebase SDK, and Angular 5. Here's what to do:

• Install compatible versions
  Angular 5 works best with AngularFire2 v5.x and Firebase SDK v4.x. First uninstall your current versions:

  npm uninstall angularfire2 firebase --save
  

  Then install the tested, compatible versions:

  npm install angularfire2@5.0.0-rc.6 firebase@4.8.2 --save
  

  This combination is known to play nicely with Angular 5.2.1.

• Check your AppModule configuration
  After updating, make sure your AppModule correctly imports AngularFire modules. For example:

  import { AngularFireModule } from 'angularfire2';
  import { AngularFireDatabaseModule } from 'angularfire2/database';
  import { environment } from '../environments/environment';
  
  @NgModule({
    imports: [
      AngularFireModule.initializeApp(environment.firebase),
      AngularFireDatabaseModule
    ]
  })
  export class AppModule { }
  

• Resolve the firebase.Promise error
  The TS2694 error pops up because newer Firebase SDKs removed the custom Promise type. The version combination above should fix this, but if you still see it, add a type alias in your typings.d.ts file:

  declare namespace firebase {
    type Promise<T> = Promise<T>;
  }
  

After making these changes, run ng serve or ng build again—your compilation should work smoothly!

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