CODEWITHSUNDEEP
angular2-routingangular-cli
JGFMK
JGFMK

Reputation: 8904

Angular Router example Best way to upgrade to include .angular-cli.json and bypass Cannot read property 'config' of null

I tried downloading the Routing and Navigation example from this page

Here's the link to the specific zip.

I run the following sequence of commands:

  1. npm install
  2. npm install --save-dev @angular/cli@latest
  3. ng -v
  4. ng serve -o

From what I can make out Cannot read property 'config' of null is somehow related to a bad version of the CLI. But if I create a new project I can start it successfully with my existing setup

  1. ng new router
  2. cd router
  3. npm install
  4. ng serve -o

Old directory structure (from zip download) includes these files:

New directory structure (from ng new):

Is there some sort of ng upgrade command to convert a project?
There was some talk on Git about ng init, but that seems to now be a thing of the past.
I believe most of the files are related to end to end testing.

    npm install
    npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
    npm WARN deprecated [email protected]: Use uuid module instead

    > [email protected] install /opt/AngularProjects/router/node_modules/phantomjs-prebuilt
    > node install.js

    PhantomJS not found on PATH
    Download already available at /var/folders/xz/sgpc803n1ms6xpc5n571ytc80000gn/T/phantomjs/phantomjs-2.1.1-macosx.zip
    Verified checksum of previously downloaded file
    Extracting zip contents
    Removing /opt/AngularProjects/router/node_modules/phantomjs-prebuilt/lib/phantom
    Copying extracted folder /var/folders/xz/sgpc803n1ms6xpc5n571ytc80000gn/T/phantomjs/phantomjs-2.1.1-macosx.zip-extract-1498561599287/phantomjs-2.1.1-macosx -> /opt/AngularProjects/router/node_modules/phantomjs-prebuilt/lib/phantom
    Writing location.js file
    Done. Phantomjs binary available at /opt/AngularProjects/router/node_modules/phantomjs-prebuilt/lib/phantom/bin/phantomjs

    > [email protected] install /opt/AngularProjects/router/node_modules/fsevents
    > node install

    [fsevents] Success: "/opt/AngularProjects/router/node_modules/fsevents/lib/binding/Release/node-v57-darwin-x64/fse.node" already installed
    Pass --update-binary to reinstall or --build-from-source to recompile
    npm notice created a lockfile as package-lock.json. You should commit this file.
    added 767 packages in 20.239s


    ng serve -o
    Unable to find "@angular/cli" in devDependencies.

    Please take the following steps to avoid issues:
    "npm install --save-dev @angular/cli@latest" 

    You have to be inside an Angular CLI project in order to use the serve command.
    /opt/AngularProjects/router>


    npm install --save-dev @angular/cli@latest
    npm WARN prefer global [email protected] should be installed with -g

    > [email protected] install /opt/AngularProjects/router/node_modules/node-sass
    > node scripts/install.js

    Cached binary found at /Users/jgf/.npm/node-sass/4.5.3/darwin-x64-57_binding.node

    > [email protected] postinstall /opt/AngularProjects/router/node_modules/node-sass
    > node scripts/build.js

    Binary found at /opt/AngularProjects/router/node_modules/node-sass/vendor/darwin-x64-57/binding.node
    Testing binary
    Binary is fine
    + @angular/[email protected]
    added 431 packages in 17.132s

    ==
    ng -v
        _                      _                 ____ _     ___
       / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
      / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
     / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
    /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                   |___/
    @angular/cli: 1.1.3
    node: 8.1.2
    os: darwin x64
    @angular/animations: 4.2.4
    @angular/common: 4.2.4
    @angular/compiler: 4.2.4
    @angular/compiler-cli: 4.2.4
    @angular/core: 4.2.4
    @angular/forms: 4.2.4
    @angular/http: 4.2.4
    @angular/platform-browser: 4.2.4
    @angular/platform-browser-dynamic: 4.2.4
    @angular/platform-server: 4.2.4
    @angular/router: 4.2.4
    @angular/tsc-wrapped: 4.2.4
    @angular/upgrade: 4.2.4
    @angular/cli: 1.1.3


    ng serve -o
    Cannot read property 'config' of null
    TypeError: Cannot read property 'config' of null
        at Class.run (/opt/AngularProjects/router/node_modules/@angular/cli/tasks/serve.js:22:63)
        at check_port_1.checkPort.then.port (/opt/AngularProjects/router/node_modules/@angular/cli/commands/serve.js:110:26)
        at 
        at process._tickCallback (internal/process/next_tick.js:169:7)

In relation to the error in:
/opt/AngularProjects/router/node_modules/@angular/cli/tasks/serve.js
we have:

const config_1 = require("../models/config");
...
const projectConfig = config_1.CliConfig.fromProject().config;

I suspect this pertains to a missing .angular-cli.json file. /opt/AngularProjects/router/node_modules/@angular/cli/models/config.d.ts
and
/opt/AngularProjects/router/node_modules/@angular/cli/models/config.js
refer to it.

Upvotes: 0

Views: 688

Answers (2)

JGFMK
JGFMK

Reputation: 8904

I converted the project to a CLI one, by following these steps, so I could run ng test and follow along with the Tour of Heroes project and run karma tests etc based on testing documentation:

  1. Create a blank new project with ng new <project name>
  2. Delete node_modules folder, then copied the following over into existing project:
  3. .angular-cli.json
    renaming "name:" key to same value of "name:" in package.json
  4. e2e folder containing:
    • app.e2e-spec.ts
    • app.po.ts
    • tsconfig.e2e.json
  5. karma.conf.js
  6. protractor.conf.js
  7. tsconfig.json (rename original to tsconfig.orig.json if necessary)
  8. tslint.json (rename original to tsconfig.orig.json if necessary)
  9. copy package.json to package.orig.json. Then in package.json...:
    • updated scripts: updating/adding:
      • "ng": "ng",
      • "build": "ng build",
      • "start": "ng serve",
      • "e2e": "ng e2e",
      • "test": "ng test",
      • "lint": "ng lint"
    • dependencies:
      • updated all @angular using modules
      • npm install @angular/<package-name>@latest --save
        i.e.: (prefaced with @angular/) animations,common, compiler, core, forms, http, platform-browser, platform-browser-dynamic, router.
    • devDependencies:
      • npm install @angular/<package-name>@latest --save-dev
        @angular/cli, @angular/compiler-cli, @angular/language-service
    • I also included in devDependencies:
      • "@types/jasmine": "2.5.45",
      • "@types/node": "~6.0.60",
      • "jasmine-core": "~2.6.2",
      • "jasmine-spec-reporter": "~4.1.0",
      • "karma": "^1.7.0",
      • "karma-chrome-launcher": "^2.1.1",
      • "karma-cli": "^1.0.1",
      • "karma-coverage-istanbul-reporter": "^1.2.1",
      • "karma-jasmine": "~1.1.0",
      • "karma-jasmine-html-reporter": "^0.2.2",
      • "protractor": "~5.1.2",
      • "ts-node": "~3.0.4",
      • "tslint": "^5.3.1",
      • "typescript": "~2.3.3"
  10. In src folder copied:
    • assets/.gitkeep
    • environments/environment.prod.ts
    • environments/environment.ts
    • polyfills.ts
    • test.ts
    • tsconfig.app.json
    • tsconfig.spec.json
    • typings.d.ts
  11. Replaced main.ts (In my case it added extra production env stuff)
  12. In src folder:
    • renamed tsconfig.json tsconfig.orig.json (I was able to rely on tsconfig.app.json and tsconfig.spec.json)
    • You may need to tweak index.html. I did not..
  13. run npm install
  14. run ng serve -o
  15. run ng test

Voila!

Note: If you get this error when running ng test:

Cannot read property 'length' of undefined
TypeError: Cannot read property 'length' of undefined
    at createSourceFile (/opt/AngularProjects/quickstart/node_modules/typescript/lib/typescript.js:15457:109)
    at parseSourceFileWorker (/opt/AngularProjects/quickstart/node_modules/typescript/lib/typescript.js:15389:26)
    at Object.parseSourceFile (/opt/AngularProjects/quickstart/node_modules/typescript/lib/typescript.js:15338:26)
    at Object.createSourceFile (/opt/AngularProjects/quickstart/node_modules/typescript/lib/typescript.js:15192:29)
    at WebpackCompilerHost.getSourceFile (/opt/AngularProjects/quickstart/node_modules/@ngtools/webpack/src/compiler_host.js:210:27)
    at findSourceFile (/opt/AngularProjects/quickstart/node_modules/typescript/lib/typescript.js:67909:29)
    at processSourceFile (/opt/AngularProjects/quickstart/node_modules/typescript/lib/typescript.js:67840:27)
    at processRootFile (/opt/AngularProjects/quickstart/node_modules/typescript/lib/typescript.js:67728:13)
    at /opt/AngularProjects/quickstart/node_modules/typescript/lib/typescript.js:67018:60
    at Object.forEach (/opt/AngularProjects/quickstart/node_modules/typescript/lib/typescript.js:1449:30)
    at Object.createProgram (/opt/AngularProjects/quickstart/node_modules/typescript/lib/typescript.js:67018:16)
    at AotPlugin._setupOptions (/opt/AngularProjects/quickstart/node_modules/@ngtools/webpack/src/plugin.js:129:28)
    at new AotPlugin (/opt/AngularProjects/quickstart/node_modules/@ngtools/webpack/src/plugin.js:26:14)
    at _createAotPlugin (/opt/AngularProjects/quickstart/node_modules/@angular/cli/models/webpack-configs/typescript.js:55:12)
    at Object.exports.getNonAotTestConfig (/opt/AngularProjects/quickstart/node_modules/@angular/cli/models/webpack-configs/typescript.js:102:19)
    at WebpackTestConfig.buildConfig (/opt/AngularProjects/quickstart/node_modules/@angular/cli/models/webpack-test-config.js:16:31)

it's because you've missed an required item. For me it was test.ts. See here.

Upvotes: 0

Brocco
Brocco

Reputation: 64953

That project (the one in the zip file) is not setup as a CLI-based project. But after opening it up, you can get it running by doing the following:

  • npm install
  • npm run start

This will open your default browser to http://localhost:3000/ where the app will be running.

NOTE: you'll also want to undo any changes you've made (or unzip again)

Upvotes: 1

Related Questions