问题描述
我正在使用所有与Angular相关的软件包的最新版本(即Angular 10)。
我想向组件中添加一些代码,但是我只希望该代码存在于dev中,而不是在生产版本中。它需要在产品构建中完全剥离。我发现this comment,表明环境是自动执行此操作的(因为它们是const
)。
我尝试在我的应用程序中使用确切的代码,但是开发代码仍在生产版本中存在。我将代码复制到了用ng new
制作的新测试应用程序中,并且在该程序中可以正常工作。
我要寻找什么东西,如何解决?这可能是因为我有Commonjs依赖项,如果是这样,我可以对此做任何事情(因为我无法删除那些依赖项)?
一些注意事项:
- angular-cli仓库here上已经出现了一个问题。
- 我已经彻底搜索了
environment
对象,从未将其写入代码库中的任何位置。 (无论如何,它仅在少数几个地方使用。) - 以
if (false) { }
为界的代码已正确剥离。 - 从
environment{.prod}.ts
末尾删除服务导出并不能解决问题。 - 删除所有Commonjs依赖项不能解决问题。
这里是environment.prod.ts
(environment.ts
是相同的,只是用false
而不是true
):
export const environment = {
production: true
};
export * from './services/services';
以下是我正在测试的main.ts
:
import { enableProdMode } from '@angular/core';
import { platformbrowserDynamic } from '@angular/platform-browser-dynamic';
import { environment } from 'environments/environment';
import { AppModule } from './app/app.module';
// tslint:disable:no-console
if (environment.production) {
console.warn('this is a prod build');
enableProdMode();
}
if (!environment.production) {
console.warn('this is a dev build');
}
platformbrowserDynamic()
.bootstrapModule(AppModule)
.catch(err => console.error(err));
运行ng build -c my-prod-config
后,这里是相关的输出代码:
o.X.production && (console.warn('this is a prod build'),Object(i.R) ()),o.X.production || console.warn('this is a dev build'),s.d().bootstrapModule(fi).catch (e=>console.error(e))
这是angular.json
的相关部分:
"my-prod-config": {
"optimization": true,"outputHashing": "all","sourceMap": false,"extractCss": true,"namedChunks": false,"aot": true,"extractLicenses": true,"vendorChunk": false,"buildOptimizer": true,"stylePreprocessorOptions": {
"includePaths": [
"src/styles"
]
},"fileReplacements": [
{
"replace": "src/environments/environment.ts","with": "src/environments/environment.prod.ts"
}
],"baseHref": "./"
}
这里是tsconfig.base.json
:
{
"compileOnSave": false,"compilerOptions": {
"downlevelIteration": true,"importHelpers": true,"module": "ES2020","outDir": "./dist/out-tsc","sourceMap": true,"declaration": false,"moduleResolution": "node","baseUrl": "src/","experimentalDecorators": true,"allowJs": true,"target": "es2015","lib": [
"es2018","dom"
],"paths": {
"path1": [
"app/modules/stripped-from-stack-overflow-example1"
],"path2": [
"app/modules/stripped-from-stack-overflow-example2"
]
}
},"files": [
"src/main.ts","src/polyfills.ts"
],"angularCompilerOptions": {
"fullTemplateTypeCheck": true,"strictTemplates": true,"strictInjectionParameters": true
}
}
这里是package.json
:
{
"name": "my-app","version": "0.0.0","license": "MIT","scripts": {
"section stripped": "section stripped"
},"private": true,"dependencies": {
"@angular/animations": "10.0.8","@angular/common": "10.0.8","@angular/compiler": "10.0.8","@angular/core": "10.0.8","@angular/forms": "10.0.8","@angular/platform-browser": "10.0.8","@angular/platform-browser-dynamic": "10.0.8","@angular/router": "10.0.8","@ng-idle/core": "9.0.0-beta.1","@ng-idle/keepalive": "9.0.0-beta.1","@ngneat/until-destroy": "8.0.1","angular-svg-icon": "10.0.0","brace": "0.11.1","caniuse-lite": "1.0.30001111","chart.js": "2.9.3","core-js": "3.6.5","css-vars-ponyfill": "2.3.2","detect-browser": "5.1.1","element-closest-polyfill": "1.0.2","file-saver": "2.0.2","fomantic-ui": "2.8.6","jsonexport": "3.0.1","moment": "2.24.0","ngx-drag-drop": "2.0.0","rxjs": "6.6.2","tslib": "^2.0.0","typeface-roboto": "0.0.75","uuid": "8.3.0","zone.js": "0.10.3"
},"devDependencies": {
"@angular-devkit/build-angular": "0.1000.5","@angular/cli": "10.0.5","@angular/compiler-cli": "10.0.8","@angular/language-service": "10.0.8","@types/chart.js": "2.7.54","@types/file-saver": "2.0.1","@types/uuid": "8.0.1","codelyzer": "^6.0.0","rimraf": "3.0.2","rxjs-tslint-rules": "4.34.0","ts-node": "8.10.2","tslint": "6.1.3","tslint-angular": "3.0.2","typescript": "3.9.7","webpack-bundle-analyzer": "3.8.0"
}
}
解决方法
您可以应用与environment.ts
相同的逻辑;创建main.prod.ts
(无开发人员专用代码)和main.dev.ts
(无开发人员专用代码),然后在配置中使用fileReplacements
。
产品的配置为:
"fileReplacements": [
...
{
"replace": "src/main.ts","with": "src/main.prod.ts"
}
,
您链接到的帖子专门指出,摇晃发生在“ if语句中的常量控制的代码”上。因此,您可能需要将if语句更改为:
if (environment.production===true) {
console.warn('this is a prod build');
enableProdMode();
}
else
{
console.warn('this is a dev build');
}
引入常量的存在。
,我不知道您的环境有什么问题,但是您似乎不需要执行任何操作,并且生产版本可以解决此问题。
例如,我测试了具有以下代码的组件:
@Component({
selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'test1';
constructor() {
console.log('A');
if (environment.production) {
console.log('B');
} else {
console.log('C');
}
console.log('D');
if (!environment.production) {
console.log('E');
} else {
console.log('F');
}
console.log('G');
}
}
然后我运行了ng build --prod
。这是在输出代码中丑陋地发出组件的构造函数的方式:
{class t{constructor(){this.title="test1",console.log("A"),console.log("B"),console.log("D"),console.log("F"),console.log("G")}}
请注意,if条件和console.log('C')和console.log('E')不在输出中。
这是它在es5输出中的发出方式:
(Wu=function n(){v(this,n),this.title="test1",console.log("G")})
再次查看if条件以及console.log('C')和console.log('E')
因此,除非您的环境有问题,否则仅使用--prod标志进行构建即可解决该问题。
,我们知道environment.ts文件将在prod构建期间替换为environment.prod.ts文件。您已经编写了app.component.ts条件中的else语句,这些条件将在运行时进行评估并且不会摇晃树
我想建议一种替代方法,创建两个名为lib-dev和lib-prod的库项目。
使用ng g library lib-prod
和ng g library lib-dev
创建库项目。
在库项目中创建所需的模块,组件和服务。确保两个库项目中的组件选择器,模块和服务名称都相同。
名称应该相同。
{
"name": "my-lib","version": "0.0.1","peerDependencies": {
"@angular/common": "^10.0.0","@angular/core": "^10.0.0"
}
}
tsconfig.json
....
"paths": {
"my-lib": [
"dist/my-lib"
],"extension/*": [
"dist/my-lib/*"
]
}
在您的app.module.ts中,使用编译的库项目。
import { MyLibModule } from "dist/my-lib";
@NgModule({
declarations: [AppComponent],imports: [
BrowserModule,.....
MyLibModule
],providers: [
],bootstrap: [AppComponent]
})
export class AppModule { }
主应用程序的package.json
{
"name": "demandfarm-ngweb","version": "0.0.0","scripts": {
"ng": "ng","start": "ng build lib-dev && ng serve",...
"build:prod": "ng build lib-prod && ng build --prod "
},
对于开发者,
npm run start
命令将首先编译lib-dev
库项目,然后运行ng serve
。
它将在主应用中使用编译后的lib-dev
。
对于产品,
npm run build:prod
命令将首先编译lib-prod
库项目,然后运行ng build --prod
。
Angular团队成员here on GitHub回答了这个问题。答案是这是Webpack的问题-如果将环境文件导入到多个输出文件中,则Webpack无法正确优化它。为了后代,我在下面粘贴了完整的答复。
如果没有复制品,很难确定最终原因。但是,潜在的原因是在多个生成的输出文件中使用了环境JS模块(environment.ts / environment.prod.ts)。如果在主代码和惰性路由的代码中使用了环境模块,则可能是这种情况。发生这种情况时,Webpack无法将环境模块与主模块连接(就像在新项目中一样),因为环境模块需要可被两个不同的输出模块访问。然后,这又阻止了优化器内联生产属性值,因为环境对象现在实际上是从另一个模块导入的,而不是局部变量。
发生这种情况时,应在应用程序的主输出文件中结束类似于以下代码(代表一个单独的Webpack模块)的代码:
AytR: function (module,__webpack_exports__,__webpack_require__) { "use strict"; __webpack_require__.d(__webpack_exports__,"a",function () { return environment; }); const environment = { production: !0 }; },