Question

我在模块中使用angular-cli的环境变量。当我在另一个项目中导入我的模块时，是否可以在编译和运行时使用我的项目的环境变量？

我的模块

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

我的模块是my.service.ts

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

我的模块的环境。

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

我的模块的environment.prod.ts

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

我的项目

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

我的项目的AppComponent

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

我的项目环境。

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

我的项目的environment.prod.ts

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

目前，当我运行我的项目时，我看到我的模块处于开发模式，但我希望在开发模式下看到我的项目。

有没有办法从environment.ts＆＃39;等相对网址导入 import { environment } from '/src/my-app/environments/environment？？

Answer 1

根据我的理解，你是一个项目：＆＃39; MyProject＆＃39;和一个外部模块＆＃39; MyModule＆＃39;并且您想导入＆＃39; MyProject＆＃39; ＆＃39; MyModule＆＃39;中的环境变量service＆＃39; MyService＆＃39;。

恕我直言，从设计的角度来看，如果您将环境变量作为参数传递给“我的服务”，那就更好了。你打算用它的地方。

但是，如果您坚持导入它，要导入两个环境变量，请在my.service.ts 试试这个：

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

考虑您的项目文件夹结构：

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.

更多澄清：

TypeScript 导入规则与nodeJS具有相同的约定。如果导入以点开头：

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

然后将其视为声明导入的文件的相对路径。但是，如果它是绝对路径（例如，导入angular2组件）：

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

因此，Typescript认为这是一个外部模块，它上升到文件树，直到找到package.json文件。然后进入node_modules文件夹，找到与导入名称相同的文件夹（在上面的示例中为@angular/core）。然后在模块的package.json中查找主.d.ts或.ts文件，然后加载它，或者查找与指定文件同名的文件或index.d.ts或index.ts文件。

Answer 2

我认为这是不可能的，因为导入的文件的范围限定为导入它的文件，因此除非将其分配给暴露给外部组件的类变量，否则无法从外部访问此文件和数据。 / p>

我的建议是：

选项1

在需要它的每个文件中导入env文件，这样做没有问题。三次摇晃将消除重复。

选项2

在导入此env文件的模型中创建服务，将数据分配给变量并通过服务公开该变量。因此，当您在另一个模型中加载模型时，您还可以加载服务并访问公开的env变量。

类似的东西：

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

然后，您可以在任何需要env数据的地方使用此服务。

使用Angular Cli的环境和导入的模块

2 个答案:

选项1

选项2

my.service.ts