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

Kar*_*538 6 environment-variables angular-cli angular

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

我的模块

myModule/
    src/
        /app
            my.service.ts
        /environments
            environment.prod.ts
            environment.ts
    app.module.ts
    etc.
Run Code Online (Sandbox Code Playgroud)

我的模块是my.service.ts

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

我的模块的环境.ts

export const environment = {
  production: false,
  title: 'My Module in dev mode'
}
Run Code Online (Sandbox Code Playgroud)

我的模块的environment.prod.ts

export const environment = {
  production: true,
  title: 'My Module in prod mode'
}
Run Code Online (Sandbox Code Playgroud)

我的项目

myProject/
    src/
        /app
            app.component.ts
        /environments
            environment.prod.ts
            environment.ts
    app.module.ts
    etc.
Run Code Online (Sandbox Code Playgroud)

我的项目是AppComponent

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

我的项目的环境

export const environment = {
  production: false,
  title: 'My Project in dev mode'
}
Run Code Online (Sandbox Code Playgroud)

我的项目是environment.prod.ts

export const environment = {
  production: true,
  title: 'My Project in prod mode'
}
Run Code Online (Sandbox Code Playgroud)

目前,当我运行我的项目时,我看到我的模块处于开发模式,但我想在开发模式下看到我的项目.

有没有办法从相对网址导入 '?environment.tsimport { environment } from '/src/my-app/environments/environment

Ahm*_*hem 5

据我了解,您有一个项目:“ MyProject”和一个外部模块“ MyModule”,并且您想要在“ MyModule”服务“ MyService”中导入“ MyProject”环境变量。

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

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

import { myModuleEnvironment } from './environments/environment';
import { myProjectEnvironment } from  '../../../src/app/environments/environment
Run Code Online (Sandbox Code Playgroud)

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

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.
Run Code Online (Sandbox Code Playgroud)

更多说明:

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

import {library} from './some/library/path';
Run Code Online (Sandbox Code Playgroud)

然后将其视为声明导入的文件的相对路径。但是,如果它是绝对路径(例如,导入angular2 Component):

import {Component} from '@angular/core';
Run Code Online (Sandbox Code Playgroud)

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