Angular CLI(v7)集成Cesium时出现构建错误求助

Great question! Let's break down what's happening here and how to resolve this frustrating error.

The Root Cause #

First, let's clear up the confusion: that return in Cesium's index.js is inside a conditional block—so why is Webpack (which powers Angular CLI under the hood) throwing this error?

The issue is that Cesium's default index.js is built for Node.js environments, not browser-based Angular apps. Here's why it breaks:

• Node.js allows return statements at the top level of a module (it tells the module to stop executing), but browsers and Webpack don't support this syntax for client-side code.
• The file also uses Node-specific APIs like process.env.NODE_ENV and path, which aren't available in the browser unless you explicitly configure Webpack to handle them (something Angular CLI doesn't do by default).

Webpack tries to parse this Node-focused file as browser-compatible JavaScript, hits the top-level return, and throws the "Module parse failed" error.

Step-by-Step Fixes #

You need to bypass Cesium's Node entry point and use its pre-built browser bundle instead. Here are two reliable approaches:

Approach 1: Use Angular CLI Assets to Serve Cesium's Pre-Built Files

This is the simplest method for most Angular projects:

1. Add Cesium's build files to your Angular assets
   Open angular.json, find the architect.build.options.assets array, and add an entry to copy Cesium's pre-built files to your app's assets folder:

   "assets": [
     "src/favicon.ico",
     "src/assets",
     {
       "glob": "**/*",
       "input": "./node_modules/cesium/Build/Cesium",
       "output": "/assets/cesium"
     }
   ]
   

2. Load Cesium in your app's entry point
   Open src/index.html and add references to Cesium's JS and CSS files:

   <script src="assets/cesium/Cesium.js"></script>
   <link rel="stylesheet" href="assets/cesium/Widgets/widgets.css">
   

3. Add Cesium types for TypeScript support
   Open tsconfig.json and add "cesium" to the types array to get proper type hints:

   "types": ["cesium"]
   

Approach 2: Configure Webpack to Alias Cesium to the Browser Bundle

If you prefer importing Cesium directly in your components (instead of loading it via index.html), you'll need to customize Angular CLI's Webpack config using @angular-builders/custom-webpack:

1. Install the custom webpack builder

   npm install @angular-builders/custom-webpack --save-dev
   

2. Create a custom webpack config file
   Make a webpack.config.js file in your project root:

   const path = require('path');
   module.exports = {
     resolve: {
       alias: {
         // Point 'cesium' imports to the browser-compatible bundle
         cesium: path.resolve(__dirname, 'node_modules/cesium/Build/Cesium/Cesium.js')
       }
     },
     // Optional: Define empty Node.js globals to avoid missing API errors
     node: {
       fs: 'empty',
       http: 'empty',
       https: 'empty',
       zlib: 'empty'
     }
   };
   

3. Update Angular CLI to use the custom builder
   In angular.json, change the builder for build and serve targets to use the custom webpack builder, then add the config path:

   "architect": {
     "build": {
       "builder": "@angular-builders/custom-webpack:browser",
       "options": {
         "customWebpackConfig": {
           "path": "./webpack.config.js"
         },
         // ... rest of your existing build options
       }
     },
     "serve": {
       "builder": "@angular-builders/custom-webpack:dev-server",
       // ... rest of your existing serve options
     }
   }
   

4. Import Cesium in your components
   Now you can import Cesium directly in your TypeScript files like this:

   import * as Cesium from 'cesium';
   

Verify the Fix #

After applying either approach, restart your Angular dev server with ng serve—the "return outside of function" error should disappear, and you can start building with angular-cesium as intended.

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