Using an Angular Cli Environment with an Imported Module

Question

I use angular-cli environment variables in the module. When I import my module into another project, is it possible to use project environment variables at compilation and runtime?

My module

myModule/ src/ /app my.service.ts /environments environment.prod.ts environment.ts app.module.ts etc. 

My module my.service.ts

 import { environment } from './environments/environment'; @Injectable() export class MyService { private title = environment.title; showTitle(): string { return this.title; } etc. } 

My environment.ts module

 export const environment = { production: false, title: 'My Module in dev mode' } 

My module environment.prod.ts

 export const environment = { production: true, title: 'My Module in prod mode' } 

My project

 myProject/ src/ /app app.component.ts /environments environment.prod.ts environment.ts app.module.ts etc. 

My AppComponent Project

 Component({ selector: 'app-root', template: `<h1>{{title}}</h1>` }) export class AppComponent { title: string; constructor(myService: MyService) { this.title = myService.showTitle(); } } 

My project environment.ts

 export const environment = { production: false, title: 'My Project in dev mode' } 

My project environment.prod.ts

 export const environment = { production: true, title: 'My Project in prod mode' } 

Currently, when I run my project, I see My Module in dev mode, but I want to see My Project in dev mode.

Is there a way to import environment.ts from a relative url like import { environment } from '/src/my-app/environments/environment '?

Answer 1

As far as I understand, you have a project: "MyProject" and an external module "MyModule", and you want to import MyProject environment variables into the "MyModule" "MyService" service.

IMHO, From a design point of view, it is better if you pass the environment variable as an argument to "MyService" where you intend to use it.

However, if you insist on importing it to import as environment variables, in my.service.ts try the following:

 import { myModuleEnvironment } from './environments/environment'; import { myProjectEnvironment } from '../../../src/app/environments/environment 

Given the structure structure of your project:

 myProject/ myModule/ src/ /app my.service.ts /environments environment.prod.ts environment.ts app.module.ts src/ /app app.component.ts /environments environment.prod.ts environment.ts app.module.ts etc. 

Additional Information:

TypeScript Import rules have the same convention as nodeJS. If import starts from point:

 import {library} from './some/library/path'; 

It is then considered as the relative path from the file declaring the import. If, however, this is an absolute path (e.g. importing angular2 Component):

 import {Component} from '@angular/core'; 

So, Typescript consider this to be an external module, it goes up to the file tree until it finds the package.json file. Then go to the node_modules folder and find the folder with the same name as the import (in the example above: @angular/core ). Then it goes into the package.json module for the main file .d.ts or .ts, and then loads it or looks for a file with the same name as the specified one, or index.d.ts or index.ts.

Answer 2

I do not think this is possible because the imported files are attached to a file that imports it, so you cannot access this file and data from the outside unless you assign it to a class variable that is subject to external components.

I suggest:

Option 1

Import the env file into each file that it needs, without any problems. Three shakes remove duplication.

Option 2

Create a service in a model that imports this env file, assigns data to a variable, and sets this variable through the service. Thus, if you load a model into another model, you also load the service and can access the public env variable.

Sort of:

my.service.ts

 import { environment } from './environments/environment'; @Injectable() export class MyService { environmentData = environment; // HERE YOU EXPOSE THE DATA THROUGH THIS SERVICE private title = environment.title; showTitle(): string { return this.title; } etc. } 

Then you can use this service wherever you want env data.