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

Question

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:

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

Answer 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.