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?

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`. — John Dibling, Mar 16 '17 at 13:22

score 50 · Answer 1 · edited Apr 26 '17 at 13:23

50

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.

edited Apr 26 '17 at 13:23

S.L. Barth is on codidact.com

8,198
71
51
66

answered Apr 26 '17 at 07:29

Hasan Daghash

1,681
1
17
29

1

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` – Hlawuleka MAS Jun 26 '17 at 13:05
In case you have removed old directory, try @carnaru-valentin answer, it works! – hpaknia Jun 26 '17 at 19:22

score 36 · Answer 2 · edited Aug 30 '17 at 21:16

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": {}
  }
}

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' — Bipon Biswas, Aug 05 '18 at 10:29

score 10 · Answer 3 · answered Sep 25 '17 at 17:05

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": {}
    }
}

This was the solution for me. Thanks Krishna. – Fintan Kearney Nov 16 '17 at 02:53 — Fintan Kearney, Nov 16 '17 at 02:53

score 5 · Answer 4 · answered Jan 03 '18 at 17:58

5

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.

answered Jan 03 '18 at 17:58

hoogw

4,982
1
37
33

score 4 · Answer 5 · answered Apr 06 '18 at 11:18

4

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

answered Apr 06 '18 at 11:18

Amit K

181
1
4

score 2 · Answer 6 · answered Dec 27 '17 at 15:11

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.

J. Adam Connor · Answer 7 · 2017-03-16T20:10:48.750

1

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.

edited Mar 16 '17 at 20:10

answered Mar 16 '17 at 13:45

J. Adam Connor

1,694
3
18
35

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'; – Damien Mar 16 '17 at 14:05
What did you do before this issue began? – J. Adam Connor Mar 16 '17 at 14:09
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](https://github.com/angular/angular-cli/wiki/stories-rc-update). – J. Adam Connor Mar 16 '17 at 14:15
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 – Damien Mar 16 '17 at 14:44
my other projects run as expected just checked – Damien Mar 16 '17 at 15:16
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. – J. Adam Connor Mar 16 '17 at 20:09

score 1 · Answer 8 · answered Sep 23 '17 at 06:04

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 :-)

score 0 · Answer 9 · answered Sep 01 '17 at 21:07

0

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.

answered Sep 01 '17 at 21:07

Alvin Mutisya

106
7

score -1 · Answer 10 · answered May 12 '18 at 06:43

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"
  ]
}

Angular 2 Cannot read property 'config' of null

10 Answers10

Linked