Angular every console.log comes from mainjs:1 in dev

Question

when starting my application with ng serve (now ng serve -- -c deploy, because of testing, every console.log comes from either main.js:1 or polyfills.js:1, independet from which component I call the console.log().

In an other stackoverflow (Angular console logs only from main.js:1 and polyfills.js:1) someone wrote that this appears because angular doesnt build dev and instead buils production.

Here is my angular.json

{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
        "project": {
            "projectType": "application",
            "schematics": {
                "@schematics/angular:component": {
                    "style": "scss"
                }
            },
            "root": "",
            "sourceRoot": "src",
            "prefix": "app",
            "architect": {
                "build": {
                    "builder": "@angular-devkit/build-angular:browser",
                    "options": {
                        "outputPath": "dist/project",
                        "index": "src/index.html",
                        "main": "src/main.ts",
                        "polyfills": "src/polyfills.ts",
                        "tsConfig": "tsconfig.app.json",
                        "aot": true,
                        "assets": [
                            "src/favicon.ico",
                            "src/assets"
                        ],
                        "styles": [
                            "src/styles.scss",
                            "src/custom-theme.scss",
                            "./node_modules/primeicons/primeicons.css",
                            "src/css/md-theme/theme.css",
                            "primeng/resources/themes/md-dark-indigo/theme.css",
                            "./node_modules/primeng/resources/primeng.min.css",
                            "./node_modules/primeflex/primeflex.css"
                        ],
                        "scripts": [
                            "./node_modules/libsignal-protocol/dist/libsignal-protocol.js"
                        ]
                    },
                    "configurations": {
                        "production": {
                            "fileReplacements": [
                                {
                                    "replace": "src/environments/environment.ts",
                                    "with": "src/environments/environment.prod.ts"
                                }
                            ],
                            "optimization": true,
                            "outputHashing": "all",
                            "sourceMap": true,
                            "namedChunks": false,
                            "extractLicenses": true,
                            "vendorChunk": false,
                            "buildOptimizer": true,
                            "budgets": [
                                {
                                    "type": "initial",
                                    "maximumWarning": "2mb",
                                    "maximumError": "5mb"
                                },
                                {
                                    "type": "anyComponentStyle",
                                    "maximumWarning": "6kb",
                                    "maximumError": "10kb"
                                }
                            ]
                        }
                    }
                },
                "serve": {
                    "builder": "@angular-devkit/build-angular:dev-server",
                    "options": {
                        "browserTarget": "project:build"
                    },
                    "configurations": {
                        "production": {
                            "browserTarget": "project:build:production"
                        },
                        "deploy": {
                            "browserTarget": "project:build"
                        }
                    }
                },
                "extract-i18n": {
                    "builder": "@angular-devkit/build-angular:extract-i18n",
                    "options": {
                        "browserTarget": "project: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",
                        "assets": [
                            "src/favicon.ico",
                            "src/assets"
                        ],
                        "styles": [
                            "src/styles.scss"
                        ],
                        "scripts": []
                    }
                },
                "lint": {
                    "builder": "@angular-devkit/build-angular:tslint",
                    "options": {
                        "tsConfig": [
                            "tsconfig.app.json",
                            "tsconfig.spec.json",
                            "e2e/tsconfig.json"
                        ],
                        "exclude": [
                            "**/node_modules/**"
                        ]
                    }
                },
                "e2e": {
                    "builder": "@angular-devkit/build-angular:protractor",
                    "options": {
                        "protractorConfig": "e2e/protractor.conf.js",
                        "devServerTarget": "project:serve"
                    },
                    "configurations": {
                        "production": {
                            "devServerTarget": "project:serve:production"
                        }
                    }
                }
            }
        }
    },
    "defaultProject": "project"
}

Yes, it is true that is build angular build prod by default. Although, I am not so sure why you want to see logs from different components, you can configure your angular.json to serve on dev mode, then you will be able to see the logs from each component — valentine, Aug 10 '21 at 22:21

score 3 · Accepted Answer · answered Aug 10 '21 at 23:25

In the newer versions of Angular, it by default is served in prod mode. You can create a dev setting under configurations after the production setting in your angular.json.

    "dev": {
        "optimization": true,
        "outputHashing": "all",
        "sourceMap": false,
        "extractCss": true,
        "namedChunks": false,
        "aot": false,
        "extractLicenses": true,
        "vendorChunk": false,
        "buildOptimizer": true,
        "fileReplacements": [
          {
            "replace": "src/environments/environment.ts",
            "with": "src/environments/environment.dev.ts"
          }
        ]}

And then try running your serve command as ng serve -c dev

For people that see this in the future. You also have to create a file `environment.dev.ts` in the environments folder and you also have to create a new configuration underneeth serve which has the browserTarge `"[your-project-name]:build:dev"` — vazun, Aug 11 '21 at 18:49

Angular every console.log comes from mainjs:1 in dev

1 Answers1