Angular Universal报错：TypeError: Object(...) is not a function at new ApplicationRef

Hey there, let's tackle this error you're hitting with Angular Universal. This issue almost always boils down to mismatched Angular core library versions, and looking at your package.json, that's exactly what's happening here—you've got a mix of Angular 5 and Angular 6 dependencies, which creates runtime compatibility conflicts. Here's how to fix it step by step:

1. Standardize All Angular Core Package Versions #

Looking at your dependencies, you've got a clear version split:

• @angular/core, @angular/animations, @angular/platform-server are on v6.0.0
• @angular/common, @angular/compiler, @angular/forms, and others are stuck on v5.0.0

This mismatch breaks internal Angular API compatibility, which directly triggers that Object(...) is not a function error. You need to align all @angular/xxx packages to the same stable version—either upgrade all to the latest Angular 6 patch release, or downgrade the v6 packages to match v5. Let's go with Angular 6's final stable version (6.1.10) for consistency:

Update your package.json dependencies section:

"dependencies": {
  "@angular/animations": "^6.1.10",
  "@angular/cdk": "^6.4.7",
  "@angular/common": "^6.1.10",
  "@angular/compiler": "^6.1.10",
  "@angular/core": "^6.1.10",
  "@angular/forms": "^6.1.10",
  "@angular/http": "^6.1.10",
  "@angular/material": "^6.4.7",
  "@angular/platform-browser": "^6.1.10",
  "@angular/platform-browser-dynamic": "^6.1.10",
  "@angular/platform-server": "^6.1.10",
  "@angular/router": "^6.1.10",
  // Keep all other dependencies as-is
}

Don't forget to update your devDependencies too, since Angular CLI and compiler-cli need to match the core version:

"devDependencies": {
  "@angular/cli": "^6.2.9",
  "@angular/compiler-cli": "^6.1.10",
  "@angular/language-service": "^6.1.10",
  // Keep all other dev dependencies as-is
}

Then clean out your old dependencies and reinstall:

rm -rf node_modules package-lock.json
npm install

2. Ensure Angular CLI Compatibility #

Your current CLI version (@angular/cli": "^1.7.4) is built for Angular 5, which won't play nice with Angular 6 core packages. The update above fixes this by moving to CLI v6.2.9, which is fully compatible with Angular 6.

3. Tweak Your Webpack Server Config #

Your webpack.server.config.js has a regexp-replace-loader setup that's fine, but you can simplify the ContextReplacementPlugin entries—you don't need the one for Express. Keep only the Angular core path resolution:

new webpack.ContextReplacementPlugin(
  /(.+)?angular(\\|\/)core(.+)?/,
  path.join(__dirname, 'src'),
  {}
)

4. Rebuild and Test the Universal App #

Once all changes are in place, rebuild and run your app:

npm run build:universal
npm run serve:universal

If you still run into issues, double-check:

• That main.server.ts correctly imports ServerModule and ModuleMapLoaderModule
• Any third-party libraries you're using aren't relying on browser-only APIs (like window or document) without server-side fallbacks

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