Angular 11 - Error Variable 'process' must be of type 'Process'

[widipa]

I'm using Angular 11 and added version 1.1.0 of @ngx-env/builder manually and when I run the npm run start command (which is an ng serve) I get the following error:

Subsequent variable declarations must have the same type. Variable 'process' must be of type 'Process', but here has type '{ env: { [key: string]: any; NG_APP_ENV: string; }; }'.ts(2403) globals.d.ts(171, 13): 'process' was also declared here.

The steps I did were the following:

• Manually add the line "@ngx-env/builder": "^1.1.0", in the "devDependencies": section of the package.json file.

• In the angular.json file add the following lines:

  • "builder": "@ngx-env/builder:browser", in the "architect" section
  • "builder": "@ngx-env/builder:dev-server", in the "serve" section
  • "builder": "@ngx-env/builder:extract-i18n", in the "extract-i18n" section
  • "builder": "@ngx-env/builder:karma", in the "test" section
  • "builder": "@ngx-env/builder:tslint", in the "lint" section
  • "builder": "@ngx-env/builder:protractor", in the "e2e" section

• Add the file src/env.d.ts which contains the following:

declare var process: {
  env: {
    NG_APP_ENV: string;
    // Replace the line below with your environment variable for better type checking
    [key: string]: any;
  };
};

What would I need to do to make it work in Angular 11?

[chihab]

Is it a project from scratch? If not could you please try to reproduce you error in a project from scratch?

npx @angular/cli@11 new ng-app11
cd ng-app11 && npx ng add @ngx-env/[email protected]
npm start

With that, if you don't have the error (I hope so), try to spot the difference with your project?

Could you please share your Angular and TS exact versions?

Thanks @widipa

[murunwas]

add skipLibCheck": true on your tsconfig to fix the error

[fullpipe]

I think it is better to exclude just src/env.d.ts

"exclude": ["src/env.d.ts"],

[chernodub]

Hi @chihab. I created the project from scratch (via npx -p @angular/cli ng new and npx ng add @ngx-env/builder) and faced the same issue. Please see my repository with a reproduction of the issue https://github.com/chernodub/ngx-env-repro/.

Error: src/env.d.ts:1:13 - error TS2403: Subsequent variable declarations must have the same type.  Variable 'process' must be of type 'Process', but here has type '{ env: { [key: string]: any; NG_APP_ENV: string; }; }'.

1 declare var process: {
              ~~~~~~~

  node_modules/@types/node/ts4.8/globals.d.ts:27:13
    27 declare var process: NodeJS.Process;
                   ~~~~~~~
    'process' was also declared here.

💡 By the way, to solve the issue, I believe it would be more reasonable to add @ts-ignore to env.d.ts, rather than disabling the lib check for the whole project (via skipLibCheck)

// To silently merge declarations with global process
// @ts-ignore
declare var process: {
  env: {
    NG_APP_ENV: string;
    // Replace the line below with your environment variable for better type checking
    [key: string]: any;
  };
};

[chernodub]

Figured a better way to merge process types:

declare namespace NodeJS {
  export interface ProcessEnv {
    /**
     * Built-in environment variable.
     * @see Docs https://github.com/chihab/ngx-env#ng_app_env.
     */
    readonly NG_APP_ENV: string;

    // Replace the line below with your environment variable for better type checking
    readonly [key: string]: any;
  }
}