ng run my-project:server:production universal webpack no fileReplacements environment.prod.ts

[garysounigo]

Command

run

Description

Webpack don't replace file envrionment.ts by environment.prod.ts when build server.ts with ng run my-project:server:production and webpack --config webpack.server.config.js --progress --colors

Minimal Reproduction

I import environment from ./src/environments/environment in server.ts

import 'zone.js/dist/zone-node';

import * as express from 'express';
import {join} from 'path';
import { environment } from './src/environments/environment';

// Express server
const app = express();

const PORT =  process.env.PORT || 4000;
const DIST_FOLDER = join(process.cwd(), 'dist/browser');

...

I compiled my application using ng

ng build --prod
ng run my-project:server:production --bundleDependencies all

and the server script with:

webpack --config webpack.server.config.js --progress --colors

But webpack doesnt take production configuration into account as fileReplacement is not done when i check dist/server.js

...

"use strict";
/* harmony import */ var _src_environments_environment__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(139);

...

/* 139 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "environment", function() { return environment; });
// This file can be replaced during build by using the `fileReplacements` array.
// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
// The list of file replacements can be found in `angular.json`.
const environment = {
    production: false,
};
/*
 * For easier debugging in development mode, you can import the following file
 * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
 *
 * This import should be commented out in production mode because it will have a negative impact
 * on performance if an error is thrown.
 */
// import 'zone.js/dist/zone-error';  // Included with Angular CLI.

/***/ }),

...

I already try to compile the server with the --production option :

webpack --config webpack.server.config.js --progress --colors --production

But i still get the same behaviour

Your Environment

Angular CLI: 8.1.3
Node: 11.15.0
OS: darwin x64
Angular: 8.1.3
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router

Package                                    Version
--------------------------------------------------------------------
@angular-devkit/architect                  0.801.3
@angular-devkit/build-angular              0.801.3
@angular-devkit/build-optimizer            0.801.3
@angular-devkit/build-webpack              0.801.3
@angular-devkit/core                       8.1.3
@angular-devkit/schematics                 8.1.3
@ngtools/webpack                           8.1.3
@nguniversal/express-engine                8.1.1
@nguniversal/module-map-ngfactory-loader   8.1.1
@schematics/angular                        8.1.3
@schematics/update                         0.801.3
rxjs                                       6.4.0
typescript                                 3.4.5
webpack                                    4.35.2

[alan-agius4]

Angular version 8 is no longer supported. More over it looks like you are using a custom webpack builders which is also not supported by the Angular team.

See: https://angular.io/guide/releases#actively-supported-versions to learn more about which Angular versions are supported.

[garysounigo]

Yes, I know it is no longer supported but its a "very basic" case as i didnt change nothing from angular.json and package.json since i run ng new. So, no i didnt use a custom webpack builder neither specific configuration different from the Angular Team when they release version 8.

Here is my original and untouched package.json:

{
  "name": "my-project",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "compile:server": "webpack --config webpack.server.config.js --progress --colors",
    "serve:ssr": "node dist/server",
    "build:ssr": "npm run build:client-and-server-bundles && npm run compile:server",
    "build:client-and-server-bundles": "ng build --prod && ng run my-project:server:production --bundleDependencies all"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~8.1.1",
    "@angular/common": "~8.1.1",
    "@angular/compiler": "~8.1.1",
    "@angular/core": "~8.1.1",
    "@angular/forms": "~8.1.1",
    "@angular/platform-browser": "~8.1.1",
    "@angular/platform-browser-dynamic": "~8.1.1",
    "@angular/platform-server": "~8.1.1",
    "@angular/router": "~8.1.1",
    "@nguniversal/express-engine": "^8.1.1",
    "@nguniversal/module-map-ngfactory-loader": "8.1.1",
    "express": "^4.15.2",
    "rxjs": "~6.4.0",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.801.1",
    "@angular/cli": "~8.1.1",
    "@angular/compiler-cli": "~8.1.1",
    "@angular/language-service": "~8.1.1",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-loader": "^5.2.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.4.3",
    "webpack-cli": "^3.1.0"
  }
}

Hope you can help me or lead me to a solution. Thanks

[JeanMeche]

You should ask that kind of question on StackOverflow. We don't provide support for unsupported versions. (<v14 today).

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}