上下文
在Angular 9项目中,我使用两个环境:生产&模拟。
在核心模块中,我检查mock环境。
-
如果使用模拟配置进行构建,我会注入返回模拟数据的模拟服务,因此不会发出外部http请求。
-
如果使用prod配置进行构建,则会注入真正的服务。
我是这样做的:
core.module.ts
@NgModule({
declarations: [],
providers: [],
imports: [BrowserModule, HttpClientModule],
exports: [],
})
export class CoreModule {}
country.service.proxy.ts
const countryServiceFactory = (
_http: HttpClient,
_errorUtil: ErrorUtilService
) => {
return isMock
? new ServiceMock()
: new Service(_http, _errorUtil);
};
@Injectable({
providedIn: CoreModule,
useFactory: countryServiceFactory,
})
export abstract class CountryServiceProxy {
abstract getCountries(): Observable<CountryWithLanguages[]>;
}
其中ServiceMock
和Service
实现相同的接口。
这是有效的。
问题
代码不是树可摇动的。结果是,在我的捆绑包中(当我运行ng build --prod
时(甚至包括了mock服务。
我想在开发过程中将每个服务从mock切换到prod。
目标
我如何使Angular只捆绑它将要使用的服务?
我正在使用:
Angular CLI: 9.0.4
Node: 13.6.0
OS: darwin x64
Ivy Workspace: Yes
谢谢!:(
我刚刚尝试了一种似乎有效的方法:
- 在
environment.{env}.ts
文件中声明相关服务工厂 - 使用环境工厂作为您的服务提供商
我的测试设置:
基类
@Injectable()
export abstract class TestService {
abstract environment: string;
}
开发服务
@Injectable()
export class DevTestService extends TestService {
environment = 'qwertydev';
}
产品服务
@Injectable()
export class ProdTestService extends TestService {
environment = 'qwertyprod';
}
环境.ts
export const environment = {
testServiceFactory: () => new DevTestService()
};
环境.生产.ts
export const environment = {
testServiceFactory: () => new ProdTestService()
};
应用程序模块.ts
providers: [
{ provide: TestService, useFactory: environment.testServiceFactory }
],
应用程序组件.ts
constructor(private testService: TestService) {}
ngOnInit() {
console.log(this.testService.get());
}
当我检查我的构建文件时,我只在dev构建中找到qwertydev
,在prod构建中发现qwertprod
,这表明它们已经被树动摇了。
我使用了字符串qwerty*
,以便于在缩小后搜索构建文件。
在模块中声明服务
我已经在模块中声明了提供程序,以避免循环引用。通过将服务声明为providedIn: Module
,可以很容易地引入循环引用。
您可以通过声明第三方模块来解决这个问题,但这似乎有些过头了。
我已经在一个旧的答案中证明了这一点:@Injectable((decorator and providers array
替代方法
在环境文件中声明服务工厂感觉不太好。我这么做只是为了测试简单。您可以创建自己的一组特定于环境的文件,这些文件在构建时以与环境文件相同的方式被覆盖,但坦率地说,这听起来像是一场维护噩梦。