`isDevMode` not working in library: "cannot enable prod mode after platform setup"

[hiepxanh]

🚀 feature request

Relevant Package

This feature request is for @angular/core

Description

A clear and concise description of the problem or missing capability...

Yeah, here is the problem.
I have multi project:

And then instead of having 2 * 4 = 8 enviroment file duplicate for firebase information:

I really want to create only one module like this to easy import firebase module once (instead of 4 times):

but since isDevMode is calling in my firebase module, and it is call before enableProdMode() calling out. so I got this error

and even more, we can do tree sakeable module:

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    isProdMode() ? [] : DevModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Describe the solution you'd like

If you have a solution in mind, please describe it.

somekindof isProdMode() which is can read enviroment file quickly. Doesn't have to wait main.ts
That can be useful for reading prod mode from library. Or multi project workspace.

Describe alternatives you've considered

Have you considered any alternative solutions or workarounds?

solution video: https://youtu.be/UsBDLaCnALU

// environment.prod.ts 
(global as any).prod = true;

// firebase.module.ts
console.log('isProd??', (global as any).prod);

The idea behind is simple.

• some magic behind (check env file or anything that know that it's production mode) that show it's production in varible
• allow me call isProdMode() before call main.ts file instead of giving me cannot enable prod mode after platform setup like I'm calling isDevMode()

[hiepxanh]

Please don't close this issue. this is important with multi project purpose and development, People sill keep talking about this problem best practices to share environment variables with lib modules

I prefer this small feature than bazel in the next release

[hiepxanh]

I have an other solution, what if angular have some kind of reference that I can use like import { enviroment } from '@angular/common' which is reference to /enviroment/enviroment.ts ??

[hiepxanh]

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

how we can reference to enviroment file from lib ? I mean fileReplacements is working correctly, can I get the enviroment file path and load it to firebaseModule ?

[tieppt]

Just place your configuration to environments for each type of environment, then import it in your code

import { anythingExportedFromThisFile } from 'path/to/src/environments/environment';

And when you run the build/serve step with provided env, Angular CLI will replace the environment.ts to your destination env for you.

[hiepxanh]

@tieppt I think you don't understand my problem yet.

1. simple question: how do you check enviroment is 'production' from library?
2. I have 4 projects admin, web, mobile, console using the same firebase config module name: XCoreModule which is have this line:

import { isDevMode } from '@anuglar/core';
const isProd = isDevMode();

@NgModule({
  declarations: [],
  imports: [
    AngularFireModule.initializeApp(isProd ? appConfig.prod.firebase : appConfig.dev.firebase),
  ]
})

export class XCoreModule { }

when I import projects/admin/src/app.module.ts like this:

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    environment.production ? [] : AkitaNgDevtools,
    **XCoreModule** 
  ],
  providers: [{ provide: NG_ENTITY_SERVICE_CONFIG, useValue: { baseUrl: 'https://jsonplaceholder.typicode.com' }}],
  bootstrap: [AppComponent]
})
export class AppModule { }

it give me cannot enable prod mode after platform setup because I'm calling isDevMode() before main.ts

[mlc-mlapis]

@hiepxanh We use the combination of CLI "fileReplacements" feature with the definition of the new "@me/environment" lib, where CLI updates the sources of that package first, and other packages use it after that by a usual way.

[hiepxanh]

nice @mlc-mlapis can you show me your "@me/environment" custom lib?

[mlc-mlapis]

@hiepxanh Really simple. It is done using paths option in tsconfig.json:

"paths": {
      "@me/environment": [
        "environment/index.ts"
      ]
}

Inside the package, it's even simpler:

[hiepxanh]

aw, it not my problem actually I have 4 project => 8 enviroment file (not includes hmr)

it not problem how I handle theses enviroment files on 1 project. It's how I handle theses enviroment files in 4 project

[mlc-mlapis]

@hiepxanh We migrated to Nx monorepo.

[mlc-mlapis]

@hiepxanh So that @me/environment is a global package on the monorepo level.