Angular-cli: ng run project:server universal production not possible

[dottodot]

Versions

Angular CLI: 6.0.0-rc.5
Node: 8.11.1
OS: darwin x64
Angular: 6.0.0-rc.5
... animations, cli, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, platform-server, router
... service-worker

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.5.7
@angular-devkit/build-angular     0.5.7
@angular-devkit/build-optimizer   0.5.7
@angular-devkit/core              0.5.7
@angular-devkit/schematics        0.5.7
@angular/cdk                      6.0.0-rc.11
@angular/material                 6.0.0-rc.11
@ngtools/json-schema              1.1.0
@ngtools/webpack                  6.0.0-rc.5
@schematics/angular               0.5.7
@schematics/update                0.5.7
rxjs                              6.0.0-uncanny-rc.7
typescript                        2.7.2
webpack                           4.5.0

Repro steps

ng build --prod && ng run client:server

This builds the app in production mode but the universal server app uses the dev environment rather than production

I probably just missing something in my config but not sure what.

[clydin]

The following should work: ng build --prod && ng run client:server:production
Assuming the client's server target has a production configuration.
Note that ng run expects a configuration and not specifying one uses the default configuration (i.e., only the values specified in the target's options).

[dottodot]

OK that makes sense but I now get an error of

Configuration 'production' could not be found in project 'client'.

even though I have a configuration.

         "configurations": {
            "production": {
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": false,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ]
            }
}

[cyrilletuzi]

I confirm this issue.

--prod should be available for ng run.

[dottodot]

Can anyone advise how to resolve this at the moment I've having to overwrite my dev environment with the product one just to get things working which obviously isn't ideal

[dottodot]

I wondering if this is also causing other issues when running in production as when I upload to my server is just doesn't run, no errors and no changes since angular 5 which runs fine. Seems to running locally though. Anyway have reverted back to v5 for now.

[dottodot]

Also tested on a clean install and ng run alway uses the default environment rather than production, so it's currently not possible to build the universal side for production.

[hakobpogh]

and what about --watch? I think that it's also should be available for ng run.

[beeman]

This is how I got it working:

I created a configurations.production object in my server object:

"server": {
  "builder": "@angular-devkit/build-angular:server",
  "options": {
    "outputPath": "dist/store-server",
    "main": "src/main.server.ts",
    "tsConfig": "src/tsconfig.server.json"
  },
  "configurations": {
    "production": {
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.prod.ts"
        }
      ]
    }
  }
}

And I have this in my build run-script:

ng build store --prod && ng run store:server:production

This made my server side app read the production environment.

[dottodot]

@beeman thanks that has worked, I thought I'd tried this before but perhaps I did it wrong or something has changed.

[dottodot]

Actually there's still something that's not quite right in regards to this issue I raised which is probably actually a cli issue

https://github.com/angular/angular/issues/24006

This docs state that

--prod also sets the following non-flaggable settings:

87 | - Adds service worker if configured in .angular-cli.json.
88 | - Replaces process.env.NODE_ENV in modules with the production value (this is needed for some libraries, like react).

as ng run doesn't work with the --prod flag you get a NODE_ENV of none

[beeman]

@dottodot I have this as my start script: NODE_ENV=production ts-node ./server which correctly sets NODE_ENV to production in my server.ts

[dottodot]

@beeman Unfortunately I'm not seeing any difference with that.

I'm assuming you mean in package.json right, but aren't you building server.ts with webpack so you'd do "start": "NODE_ENV=production node ./server",

[beeman]

@dottodot no, I'm running server.ts directly with ts-node.

If you are using webpack to build your server, try adding this:

  new webpack.EnvironmentPlugin({
    'NODE_ENV': 'production'
  }),

That was what was previously in Angular CLI.

[Toxicable]

@beeman That would work for your application being built by webpack but not the browser side of it.
If NODE_ENV was set previously (1.x) then this is a regression with the server target.
It also would be an easy fix; just push that above plugin into the webpack config here: https://github.com/angular/devkit/blob/master/packages/angular_devkit/build_angular/src/server/index.ts

@hakobpogh I have a PR for that here: https://github.com/angular/devkit/pull/863

[beeman]

@Toxicable I don't use NODE_ENV in my Angular code so I wouldn't know the details, just pointing out to @dottodot how he might achieve his goals :-)

[Toxicable]

@beeman Yeah same here.
I personally think it's not the best of ideas to use a variable thats inserted at build time.
I would just use real environment variables for a server app or the ones from environement.ts for browser.

But either way it's still a regression that should be fixed.

[dottodot]

setting NODE_ENV in my webpack config works for me as I'm only using NODE_ENV in my server.ts but definitely needs fixing as could cause wider issues for others.

[Toxicable]

@dottodot If you're using NODE_ENV in your server.ts you should use real environment variables, the ones that come from your actual environment under process.env

[alan-agius4]

Closing as per @clydin explanation

[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._}