Angular 13 ng serve -> console.log() 不显示正确的文件名
Angular 13 ng serve -> console.log() does not display proper filenames
如果我使用 $ ng new my-test-app
创建一个新的 Angular 13 项目并添加
constructor() {
console.log('Hello there');
}
到app.component.ts,然后执行$ ng serve
并打开浏览器..
“你好”已记录在控制台中,但它表示它来自 main.js 而不是 app.component.ts
这是预期的行为吗?有谁知道如何更改它?
angular.json 下面的片段
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/my-testy-app-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": "my-testy-app-2:build:production"
},
"development": {
"browserTarget": "my-testy-app-2:build:development"
}
},
"defaultConfiguration": "development"
},
....
编辑: 问题似乎出在我的 chrome 浏览器上。它在 firefox 控制台中正确显示文件。当我弄清楚为什么时会添加解决方案
这不是使用 cli 生成的新项目所期望的默认行为,源映射在您的构建配置中以某种方式被关闭...在 angular.json 中,在项目下。[your-project].architect.build.configurations.development 设置
"sourceMap": true
这假设您的 angular.json 具有开发构建配置,并且 ng serve
命令以开发构建作为目标运行,但情况可能并非如此,同样,您的配置文件用于某些原因不标准。如果这不起作用,可能需要查看 angular.json 文件来修复它。
“启用 Javascript 源映射” 在我的 Chrome 开发工具设置中未启用(F1 ).
启用它解决了问题。
如果我使用 $ ng new my-test-app
创建一个新的 Angular 13 项目并添加
constructor() {
console.log('Hello there');
}
到app.component.ts,然后执行$ ng serve
并打开浏览器..
“你好”已记录在控制台中,但它表示它来自 main.js 而不是 app.component.ts
这是预期的行为吗?有谁知道如何更改它?
angular.json 下面的片段
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/my-testy-app-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": "my-testy-app-2:build:production"
},
"development": {
"browserTarget": "my-testy-app-2:build:development"
}
},
"defaultConfiguration": "development"
},
....
编辑: 问题似乎出在我的 chrome 浏览器上。它在 firefox 控制台中正确显示文件。当我弄清楚为什么时会添加解决方案
这不是使用 cli 生成的新项目所期望的默认行为,源映射在您的构建配置中以某种方式被关闭...在 angular.json 中,在项目下。[your-project].architect.build.configurations.development 设置
"sourceMap": true
这假设您的 angular.json 具有开发构建配置,并且 ng serve
命令以开发构建作为目标运行,但情况可能并非如此,同样,您的配置文件用于某些原因不标准。如果这不起作用,可能需要查看 angular.json 文件来修复它。
“启用 Javascript 源映射” 在我的 Chrome 开发工具设置中未启用(F1 ).
启用它解决了问题。