angular - 使用带有导入模块的 Angular Cli 环境

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

我模块的environment.ts

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();
    }        
}

我项目的environment.ts

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

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

有没有办法从相对 url 中导入 environment.ts import { environment } from '/src/my-app/environments/environment ' ?

Answer 1

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

恕我直言，从设计的 Angular 来看，最好将环境变量作为参数传递给您打算使用它的“MyService”。

但是，如果你坚持导入它，导入两个环境变量，在你的 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 文件。