在导入的模块中使用Angular Cli的环境 [英] Using Angular Cli's environment with an imported module

问题描述

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

I'm using angular-cli's environment variables in a module. When I import my module in another project, is it possible to use my project's environment variables at compilation and runtime ?

我的模块

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

我的模块的环境.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();
    }        
}

我的项目的环境.ts

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

我的项目的环境.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'd want to see My Project in dev mode.

是否有一种方法可以从类似import { environment } from '/src/my-app/environments/environment'的相对URL导入 environment.ts?

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

推荐答案

据我了解，您有一个项目:"MyProject"和一个外部模块"MyModule"，并且您想在其中导入"MyProject"环境变量"MyModule"服务"MyService".

From what I understand is that you've a project: 'MyProject' and an external module 'MyModule' and you want to import 'MyProject' environment variables in the 'MyModule' service 'MyService'.

恕我直言，从设计的角度来看，最好将环境变量作为参数传递给打算在其中使用"MyService"的地方.

IMHO, From a design perspective, It's better if you pass the environment variable as an argument to 'MyService' where you intend to use it.

但是，如果您坚持要导入它，则要同时导入两个环境变量，请在您的my.service.ts 尝试以下操作:

However, If you insist on importing it, to import both the environment variables, In your my.service.ts Try this:

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

考虑您的项目文件夹结构为:

Considering your project folder structure to be:

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相同的约定.如果导入以点开头:

TypeScript import rules has same convention as nodeJS. If an import begins with a dot:

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

然后将其视为声明导入的文件中的相对路径.但是，如果这是一条绝对路径(例如，导入angular2 Component):

Then it is treated as a relative path from the file that declares the import. If however it is an absolute path (e.g. importing angular2 Component):

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

因此，Typescript将此视为外部模块，它沿着文件树向上移动，直到找到package.json文件. 然后进入node_modules文件夹，并找到一个与导入名称相同的文件夹(在上例中为@angular/core). 然后在模块的package.json中查找主.d.ts或.ts文件，然后加载该文件，或者查找与指定名称相同的文件或一个index.d.ts或index.ts文件.

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

这篇关于在导入的模块中使用Angular Cli的环境的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！