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:

• bs-config.json
• e2e-spec.ts
  

New directory structure (from ng new):

• .angular-cli.json
• e2e is a folder with files inside
• karma.conf.js
• protractor.conf.js
• tsconfig.json

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 minimatch@0.3.0: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue     npm WARN deprecated node-uuid@1.4.8: Use uuid module instead      > phantomjs-prebuilt@2.1.14 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      > fsevents@1.1.2 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 node-gyp@3.6.2 should be installed with -g      > node-sass@4.5.3 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      > node-sass@4.5.3 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/cli@1.1.3     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.

回答1:

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)

回答2:

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.

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