Angular Error migrating from 2.4.10 to 4.0.0

I tried updating my application from Angular 2.4.10 to 4.0.0 using the command

"npm install @angular/ common@next @angular/ compiler@next @angular/ compiler-cli@next @angular/ core@next @angular/ forms@next @angular/ http@next @angular/ platform-browser@next @angular/ platform-browser-dynamic@next @angular/ platform-server@next @angular/ router@next @angular/ animations@next --save". 

Despite the absence of errors during the installation of "npm install", during the assembly of npm run I received the following errors. I added "lib" to compilerOptions as indicated in the change log.

 ERROR in [default] File '/node_modules/bootstrap-loader/loader.js' has unsupported extension. The only supported extensions are '.ts', '.tsx', '.d.ts'. ERROR in [default] File '/node_modules/core-js/es6/index.js' has unsupported extension. The only supported extensions are '.ts', '.tsx', '.d.ts'. ERROR in [default] File '/node_modules/fullcalendar/dist/fullcalendar.min.js' has unsupported extension. The only supported extensions are '.ts', '.tsx', '.d.ts'. ERROR in [default] File '/node_modules/hammerjs/hammer.js' has unsupported extension. The only supported extensions are '.ts', '.tsx', '.d.ts'. ERROR in [default] File '/node_modules/jquery-ui/jquery-ui.js' has unsupported extension. The only supported extensions are '.ts', '.tsx', '.d.ts'. ERROR in [default] File '/node_modules/jquery/dist/jquery.js' has unsupported extension. The only supported extensions are '.ts', '.tsx', '.d.ts'. ERROR in [default] File '/node_modules/lodash/lodash.js' has unsupported extension. The only supported extensions are '.ts', '.tsx', '.d.ts'. ERROR in [default] File '/node_modules/ts-helpers/index.js' has unsupported extension. The only supported extensions are '.ts', '.tsx', '.d.ts'. ERROR in [default] File '/node_modules/zone.js/dist/zone.js' has unsupported extension. The only supported extensions are '.ts', '.tsx', '.d.ts'. ERROR in [default] /node_modules/@angular/core/src/change_detection/differs/iterable_differs.d.ts:15:47 Cannot find name 'Iterable'. ERROR in [default] /typings/browser/ambient/node/index.d.ts:426:10 Interface 'NodeBuffer' incorrectly extends interface 'Uint8Array'. Types of property 'fill' are incompatible. Type '(value: any, offset?: number, end?: number) => Buffer' is not assignable to type '(value: number, start?: number, end?: number) => this'. Type 'Buffer' is not assignable to type 'this'. 

"package.json"

  "dependencies": { "@angular/common": "4.0.0", "@angular/compiler": "4.0.0", "@angular/core": "4.0.0", "@angular/forms": "4.0.0", "@angular/http": "4.0.0", "@angular/platform-browser": "4.0.0", "@angular/platform-browser-dynamic": "4.0.0", "@angular/platform-server": "4.0.0", "@angular/router": "4.0.0", "@angular/router-deprecated": "2.0.0-rc.2", "angular2-toaster": "2.0.0", "core-js": "^2.4.1", "css-loader": "0.23.1", "fullcalendar": "^2.7.1", "hammerjs": "^2.0.8", "intl": "1.2.4", "jquery": "2.2.2", "jquery-ui": "1.10.5", "ng2-auto-complete": "^0.7.0", "ng2-cookies": "^0.1.5", "ng2-file-upload": "^1.0.0-beta.1", "node-sass": "^3.8.0", "normalize.css": "^4.1.1", "path-to-regexp": "^1.5.3", "postcss": "^5.0.19", "postcss-loader": "^0.8.2", "primeng": "1.0.0-beta.15", "primeui": "4.1.10", "resolve-url-loader": "^1.6.0", "rxjs": "^5.0.1", "sass-loader": "^3.2.3", "style-loader": "^0.13.1", "tether": "^1.2.0", "typescript": "^2.1.5", "url-loader": "^0.5.7", "zone.js": "^0.8.4" }, "devDependencies": { "@angular/compiler-cli": "4.0.0", "angular2-hmr": "~0.5.5", "awesome-typescript-loader": "~0.17.0", "babel-core": "^6.2.1", "babel-loader": "^6.2.0", "babel-plugin-transform-es2015-modules-commonjs-simple": "^6.7.0", "babel-preset-es2015": "^6.1.18", "babel-preset-es2015-webpack": "^6.4.0", "bootstrap": "4.0.0-alpha.2", "bootstrap-loader": "1.0.10", "codelyzer": "0.0.15", "compression-webpack-plugin": "^0.3.1", "copy-webpack-plugin": "^2.1.3", "css-loader": "^0.23.1", "es6-promise": "^3.1.2", "es6-promise-loader": "^1.0.1", "es6-shim": "^0.35.0", "exports-loader": "^0.6.3", "expose-loader": "^0.7.1", "extract-text-webpack-plugin": "^1.0.1", "file-loader": "^0.8.5", "html-webpack-plugin": "^2.15.0", "http-server": "^0.9.0", "imports-loader": "^0.6.5", "istanbul-instrumenter-loader": "^0.2.0", "json-loader": "^0.5.4", "karma": "^0.13.22", "karma-chrome-launcher": "^0.2.3", "karma-coverage": "^0.5.5", "karma-jasmine": "^0.3.8", "karma-mocha-reporter": "^2.0.0", "karma-phantomjs-launcher": "^1.0.0", "karma-sourcemap-loader": "^0.3.7", "karma-webpack": "1.7.0", "lodash": "^4.6.1", "moment": "^2.11.2", "node-sass": "3.7.0", "npmconf": "2.1.2", "parse5": "^2.1.5", "phantomjs-polyfill": "0.0.2", "phantomjs-prebuilt": "^2.1.7", "protractor": "^3.2.2", "raw-loader": "0.5.1", "reflect-metadata": "^0.1.3", "remap-istanbul": "^0.6.3", "resolve-url-loader": "^1.4.3", "rimraf": "^2.5.2", "sass-loader": "^3.2.0", "source-map-loader": "^0.1.5", "style-loader": "^0.13.1", "ts-helpers": "1.1.1", "ts-node": "^0.7.1", "tslint": "^3.7.1", "tslint-loader": "^2.1.3", "typedoc": "^0.3.12", "typescript": "^2.1.5", "typings": "^0.8.1", "url-loader": "^0.5.7", "webpack": "^1.12.14", "webpack-dev-server": "^1.14.1", "webpack-load-plugins": "^0.1.2", "webpack-md5-hash": "^0.0.5", "webpack-merge": "^0.12.0", "webpack-validator": "^1.0.0-beta.4" } 

"tsconfig.json"

 { "compilerOptions": { "target": "es5", "module": "commonjs", "lib" : ["es2015.iterable.ts"], "emitDecoratorMetadata": true, "experimentalDecorators": true, "sourceMap": true, "noEmitHelpers": true }, "exclude": [ "node_modules", "typings/main.d.ts", "typings/main" ], "filesGlob": [ "./src/**/*.ts", "./test/**/*.ts", "!./node_modules/**/*.ts", "src/custom_typings.d.ts", "typings/browser.d.ts" ], "awesomeTypescriptLoaderOptions": { "resolveGlobs": true, "forkChecker": true }, "compileOnSave": false, "buildOnSave": false, "atom": { "rewriteTsconfig": false } } 
+5
source share
1 answer

Try adding additional libraries to your tsconfig. In my project, I have the following libs installed for angular4:

 "lib": [ "es5", "es2015", "es2017", "dom", "scripthost" ] 

If this does not work, you can try using "allowJs": true inside compilerOptions for your tsconfig.json, although I would only think that fixing a workaround for something that is probably wrong with your repository .

+1
source

Source: https://habr.com/ru/post/1265973/


All Articles