Angular 2 Cannot read property 'config' of null

Question

I have a issue with Angular 2. When i want to start server it get this:

$ ng serve
Cannot read property 'config' of null
TypeError: Cannot read property 'config' of null
at Class.run (C:\Users\Damien\Desktop\application\node_modules\@angul ar\cli\tasks\serve.js:22:63)
at check_port_1.checkPort.then.port (C:\Users\Damien\Desktop\application\node_modules\@angular\cli\commands\serve.js:103:26)
at process._tickCallback (internal/process/next_tick.js:103:7)

I reinstalled CLI and nothing else is working. I could be something with json file?

Jeremyjerez

Seems like a problem in your code. You have something that has a property called config. Let's call it Foo, so it might look like this: class Foo { public config: any; }; Then somewhere else you're trying to get the value of config, maybe like this: let f = getFoo(); let c = f.config; The problem is f is null. – Faithfaithful

Did any of the answers below answer your question? – Posterity

Answer 1

I found the solution! In my case I moved the project to another directory.
there is a hidden file called .angular-cli
Show the hidden file in the old project and copy this file and paste it in the new distention. This solved the issue for me.

Kristiankristiansand

if the issue persists and provided that you are in the root folder of your project, try run ( on . UNIX ) cp src/tsconfig.app.json src/tsconfig.json – Breadwinner

In case you have removed old directory, try @carnaru-valentin answer, it works! – Prandial

Answer 2

Probably you remove project into other folder, or delete .angular-cli.json

Into the root of your app, add: .angular-cli.json

and paste:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "PROJECT_NAME"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json"
    },
    {
      "project": "src/tsconfig.spec.json"
    },
    {
      "project": "e2e/tsconfig.e2e.json"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {}
  }
}

Jodyjoe

Where should i put this file? i mean on which path? – Lifeless

According to follow your instruction. But getting this issue ENOENT: no such file or directory, stat 'D:\test\petmatrix-pro-ng5-master\src\tsconfig.app.json' – Gasbag

Answer 3

Please add following file at root folder File Name-.angular-cli.json

{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "project": {
        "name": "XXXX"
    },
    "apps": [
        {
            "root": "src",
            "outDir": "dist",
            "assets": [
                "assets",
                "favicon.ico"
            ],
            "index": "index.html",
            "main": "main.ts",
            "polyfills": "polyfills.ts",
            "test": "test.ts",
            "tsconfig": "tsconfig.app.json",
            "testTsconfig": "tsconfig.spec.json",
            "prefix": "app",
            "styles": [
                "assets/css/styles.css"

            ],
            "scripts": [
                "assets/js/project.js"      

            ],
            "environmentSource": "environments/environment.ts",
            "environments": {
                "dev": "environments/environment.ts",
                "prod": "environments/environment.prod.ts"
            }
        }
    ],
    "e2e": {
        "protractor": {
            "config": "./protractor.conf.js"
        }
    },
    "lint": [
        {
            "project": "src/tsconfig.app.json"
        },
        {
            "project": "src/tsconfig.spec.json"
        },
        {
            "project": "e2e/tsconfig.e2e.json"
        }
    ],
    "test": {
        "karma": {
            "config": "./karma.conf.js"
        }
    },
    "defaults": {
        "styleExt": "css",
        "component": {}
    }
}

Aciculum

This was the solution for me. Thanks Krishna. – Begone

Answer 4

you missing .angular-cli.json,

you can generate it by(go to a new folder)

 ng new project-name

now copy .angular-cli.json file to your project root.

 ng serve 

the error should be gone.

Anklet

Answer 5

this error is coming due to removal of .angular-cli.json so first add this on root folder. if after that still get error then check static file in .angular-cli.json

Penitence

Answer 6

https://angular.io/guide/quickstart

Step 3: Serve the application Go to the project directory and launch the server.

content_copy cd my-app ng serve --open

May be you missed the point 3 (cd my-app)? The start directory have been like: ./my-app/my-app. If start application from other directory we get this error.

Ellyellyn

Answer 7

My first suggestion would be to update Angular CLI by following these instructions here. This topic is covered a bit here. The usual culprit is an update of Angular CLI without following the above instructions, but you don't give any specifics on your situation.

Aery

I have removed "." from angular-cli.json and it is still not working. I have updated the CLI as you describe exports.CLI_CONFIG_FILE_NAME = 'angular-cli.json'; – Jeremyjerez

What did you do before this issue began? – Aery

Removing the "." is not a solution. It was a step to diagnosing the problem for one user with that issue. I don't recommend that you change anything. What I recommend is that you uninstall and reinstall angular cli carefully following the instructions here. – Aery

ok so i was setting my our apps, new components. it was working fine then i found some interesting opensource project in angular so i clone it and try to run it locally. that's all story – Jeremyjerez

my other projects run as expected just checked – Jeremyjerez

Post your Angular CLI version in your answer. (You can get that with ng -v.) Then post the package.json and angular-cli.json files of the project in question. – Aery

Answer 8

Make Sure You are inside the project folder. This may happen when the programmer has a folder for Practice purpose for eg: says "MyWorkOuts" folder. in which the programmer may have lot of practice app says:practice1,practice2,etc...

I use VS code in which make sure the terminal is in the exact angular application you try to start.

this may look simple or even silly. But while learning all happens. after making sure you may follow the other solutions of our stackoverflow friends.

Thank You guys Good Day :-)

Preventive

Answer 9

The problem could be a mising file .angular-cli.json, do not forget the extension .json which implies the file format. Copy this file from the original project and paste it into your currrent project.

Cowart

Answer 10

http://javasampleapproach.com/aws/angular-4-amazon-s3-example-how-to-upload-file-to-s3-bucket

in your tsconfig.app.json file put this

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",
    "module": "es2015",
    "types": ["node"] 
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

Tajo