TypeError: Cannot read property 'length' of undefined (Converting angular to angular 4) - html

Question

TypeError: Cannot read property 'length' of undefined
Console log
Cannot read property 'length' of undefined
TypeError: Cannot read property 'length' of undefined
at createSourceFile (c:\Users\Amina\Desktop\LendingTree\node_modules\typescript\lib\typescript.js:15457:109)
at parseSourceFileWorker (c:\Users\Amina\Desktop\LendingTree\node_modules\typescript\lib\typescript.js:15389:26)
at Object.parseSourceFile (c:\Users\Amina\Desktop\LendingTree\node_modules\typescript\lib\typescript.js:15338:26)
at Object.createSourceFile (c:\Users\Amina\Desktop\LendingTree\node_modules\typescript\lib\typescript.js:15192:29)
at new TypeScriptFileRefactor (c:\Users\Amina\Desktop\LendingTree\node_modules\#ngtools\webpack\src\refactor.js:34:35)
at Object.resolveEntryModuleFromMain (c:\Users\Amina\Desktop\LendingTree\node_modules\#ngtools\webpack\src\entry_resolver.
js:105:20)
at AotPlugin._setupOptions (c:\Users\Amina\Desktop\LendingTree\node_modules\#ngtools\webpack\src\plugin.js:152:50)
at new AotPlugin (c:\Users\Amina\Desktop\LendingTree\node_modules\#ngtools\webpack\src\plugin.js:27:14)
at _createAotPlugin (c:\Users\Amina\Desktop\LendingTree\node_modules\#angular\cli\models\webpack-configs\typescript.js:55:
12)
at Object.exports.getNonAotConfig (c:\Users\Amina\Desktop\LendingTree\node_modules\#angular\cli\models\webpack-configs\typ
escript.js:71:19)
at NgCliWebpackConfig.buildConfig (c:\Users\Amina\Desktop\LendingTree\node_modules\#angular\cli\models\webpack-config.js:2
9:37)
at Class.run (c:\Users\Amina\Desktop\LendingTree\node_modules\#angular\cli\tasks\serve.js:43:98)
at check_port_1.checkPort.then.port (c:\Users\Amina\Desktop\LendingTree\node_modules\#angular\cli\commands\serve.js:114:26
)
at process._tickCallback (internal/process/next_tick.js:109:7)
Package.Json
{
"name": "lending-tree",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#agm/core": "^1.0.0-beta.1",
"#angular/animations": "^4.2.4",
"#angular/common": "^4.2.4",
"#angular/compiler": "^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/router": "^4.2.4",
"#types/googlemaps": "^3.29.0",
"core-js": "^2.4.1",
"rxjs": "^5.4.2",
"zone.js": "^0.8.14"
},
"devDependencies": {
"#angular/cli": "1.3.1",
"#angular/compiler-cli": "^4.2.4",
"#angular/language-service": "^4.2.4",
"#types/jasmine": "~2.5.53",
"#types/jasminewd2": "~2.0.2",
"#types/node": "~6.0.60",
"codelyzer": "~3.1.1",
"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.2.0",
"tslint": "~5.3.2",
"typescript": "~2.3.3"
}
}
I have created a new project with cli ng new projectName
Replaced app folder with my existing project.
Added template for front view in the root directory of an application.
Updated index.html only added some css and scripts.
Moved main.ts src to app folder, and changed the imports statements.
That are only changes, I have made so far.