我尝试使用Angular DevTools for Chrome Extension调试Angular应用程序,但在尝试使用时出现错误:
我们检测到使用生产配置生成的应用程序。Angular DevTools仅支持开发版本。
我可以将项目恢复到开发模式吗?
3qpi33ja1#
您可能缺少应用程序的开发配置。在angular.json中,导航到architect-〉build-〉configurations,并在生产构建的定义下面添加以下行:
architect
build
configurations
"configurations": { "production": { // already there! }, "development": { // this is new! "buildOptimizer": false, "optimization": false, "vendorChunk": true, "extractLicenses": false, "sourceMap": true, "namedChunks": true } }, "defaultConfiguration": "production"
要在开发模式下运行构建,只需键入下一个命令:ng build --configuration development .
ng build --configuration development
swvgeqrz2#
顺便说一句:完整的工作配置(下文进一步说明),如果配置不是问题所在,则:
ng serve
npx nx serve <projectname>
然后,您将看到类似的内容(取决于您自己的配置):
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
您应该会看到:
最后但同样重要的是:完整配置示例:
{ "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", "projects": { "ng14.0.2": { "projectType": "application", "schematics": { "@schematics/angular:component": { "style": "scss" } }, "root": "", "sourceRoot": "src", "prefix": "app", "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", "options": { "outputPath": "dist/ng14.0.2", "index": "src/index.html", "main": "src/main.ts", "polyfills": "src/polyfills.ts", "tsConfig": "tsconfig.app.json", "inlineStyleLanguage": "scss", "assets": [ "src/favicon.ico", "src/assets" ], "styles": [ "src/styles.scss" ], "scripts": [] }, "configurations": { "production": { "budgets": [ { "type": "initial", "maximumWarning": "500kb", "maximumError": "1mb" }, { "type": "anyComponentStyle", "maximumWarning": "2kb", "maximumError": "4kb" } ], "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.prod.ts" } ], "outputHashing": "all" }, "development": { "buildOptimizer": false, "optimization": false, "vendorChunk": true, "extractLicenses": false, "sourceMap": true, "namedChunks": true } }, "defaultConfiguration": "production" }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", "configurations": { "production": { "browserTarget": "ng14.0.2:build:production" }, "development": { "browserTarget": "ng14.0.2:build:development" } }, "defaultConfiguration": "development" }, "extract-i18n": { "builder": "@angular-devkit/build-angular:extract-i18n", "options": { "browserTarget": "ng14.0.2:build" } }, "test": { "builder": "@angular-devkit/build-angular:karma", "options": { "main": "src/test.ts", "polyfills": "src/polyfills.ts", "tsConfig": "tsconfig.spec.json", "karmaConfig": "karma.conf.js", "inlineStyleLanguage": "scss", "assets": [ "src/favicon.ico", "src/assets" ], "styles": [ "src/styles.scss" ], "scripts": [] } } } } } }
gwo2fgha3#
我在angular.json中有所有这些设置和配置。对我来说,问题如下:main.ts:
angular.json
if (environment.production) { enableProdMode(); // <-- here } platformBrowserDynamic() .bootstrapModule(AppModule) .catch(err => console.error(err));
显然,我在过去的某个时候更改了environment.ts文件的production属性,将其中的production设置为true,即使在开发模式下也是如此。把它改回false终于为我解决了这个问题。
environment.ts
production
true
false
3条答案
按热度按时间3qpi33ja1#
您可能缺少应用程序的开发配置。
在angular.json中,导航到
architect
-〉build
-〉configurations
,并在生产构建的定义下面添加以下行:要在开发模式下运行构建,只需键入下一个命令:
ng build --configuration development
.swvgeqrz2#
顺便说一句:完整的工作配置(下文进一步说明),如果配置不是问题所在,则:
ng serve
开头(如果是单一存储库npx nx serve <projectname>
)然后,您将看到类似的内容(取决于您自己的配置):
您应该会看到:
最后但同样重要的是:完整配置示例:
gwo2fgha3#
我在
angular.json
中有所有这些设置和配置。对我来说,问题如下:main.ts:
显然,我在过去的某个时候更改了
environment.ts
文件的production
属性,将其中的production
设置为true
,即使在开发模式下也是如此。把它改回
false
终于为我解决了这个问题。