Angular build throwing error (JSON.parse(stripJsonComments(content))) - node.js

I am using angular nx with nestjs. When project is cloned and run yarn command on it, it builds successfully but when even I install any package and compile the project. it throws the error:
**D:\projectNAme\nrwl\node_modules\#nrwl\workspace\src\utils\fileutils.js:44
return JSON.parse(stripJsonComments(content));
^
SyntaxError: Unexpected token } in JSON at position 562
at JSON.parse (<anonymous>)
at Object.parseJsonWithComments (D:\projectNAme\nrwl\node_modules\#nrwl\workspace\src\utils\fileutils.js:44:17)
at new TargetProjectLocator (D:\projectNAme\nrwl\node_modules\#nrwl\workspace\src\core\target-project-locator.js:22:46)
at buildExplicitTypeScriptDependencies (D:\projectNAme\nrwl\node_modules\#nrwl\workspace\src\core\project-graph\build-dependencies\explicit-project-dependencies.js:8:34)
at D:\projectNAme\nrwl\node_modules\#nrwl\workspace\src\core\project-graph\project-graph.js:60:41
at Array.forEach (<anonymous>)
at buildProjectGraph (D:\projectNAme\nrwl\node_modules\#nrwl\workspace\src\core\project-graph\project-graph.js:60:26)
at Object.createProjectGraph (D:\projectNAme\nrwl\node_modules\#nrwl\workspace\src\core\project-graph\project-graph.js:40:30)
at Object.<anonymous> (D:\projectNAme\nrwl\node_modules\#nrwl\workspace\src\command-line\run-one.js:16:46)
at Generator.next (<anonymous>)
[21:31:39] 'deployLocalAPI' errored after 820 ms
[21:31:39] Error: Command failed: cd nrwl && nx serve api
at checkExecSyncError (node:child_process:636:11)
at Object.execSync (node:child_process:672:15)
at Object.exec (D:\projectNAme\/gulpfile.babel.js:36:8)
at D:\projectNAme\_config\gulp\tasks\deploy\apps\api\/deployLocal.js:41:10
at deployLocalAPI (D:\projectNAme\node_modules\undertaker\lib\set-task.js:13:15)
at bound (node:domain:413:15)
at runBound (node:domain:424:12)
at asyncRunner (D:\projectNAme\node_modules\async-done\index.js:55:18)
at processTicksAndRejections (node:internal/process/task_queues:75:11)**
and following are the versions I am using:
"#angular-devkit/build-angular": "~0.1100.1",
"#angular/cli": "~11.0.0",
"#angular/compiler-cli": "^11.0.0",
"#angular/language-service": "^11.0.0",
"#nestjs/schematics": "^7.0.0",
"#nestjs/testing": "^7.0.0",
"#nrwl/cli": "11.0.2",
"#nrwl/cypress": "11.0.2",
"#nrwl/eslint-plugin-nx": "11.0.2",
"#nrwl/jest": "11.0.2",
"#nrwl/nest": "11.0.2",
"#nrwl/node": "11.0.2",
"#nrwl/tao": "11.0.2",
"#nrwl/workspace": "11.0.2",
"#types/jest": "26.0.8",
"#types/node": "12.12.38",
"#typescript-eslint/eslint-plugin": "4.3.0",
"#typescript-eslint/parser": "4.3.0",
"codelyzer": "^6.0.0",
"cypress": "^5.5.0",
"dotenv": "6.2.0",
"eslint": "7.10.0",
"eslint-config-prettier": "6.0.0",
"jest": "26.2.2",
"jest-preset-angular": "8.3.1",
"prettier": "2.1.2",
"ts-jest": "26.4.0",
"ts-node": "~7.0.0",
"tslint": "~6.0.0",
"typescript": "~4.0.3"

This problem occurs when we inadvertently forget a comma in the end of a JSON object inside a .json file in your project. Usually, it happens after an edit to tsconfig.json.
Because of that lonely and unnecessary comma, the JSON parser cannot "find" nor "understand" the closing braces, because it is waiting for another JSON property, therefore the error:
"Unexpected token } in JSON"
This is an example that should yield such error for tsconfig.json (e.g., in Angular 11 projects with VSCode):
"angularCompilerOptions": {
"strictTemplates": true,
"fullTemplateTypeCheck": true,<----- this last comma might be the culprit
},
Solution, check the integrity of the structure of your recently edited json files for lonely commas or lost braces. If it is indeed any lonely comma, just removing it and saving the file should be enough.

Related

SassError: Undefined variable. Failing dependencies

I have a CI/CD pipeline for an Angular project which yesterday worked fine, but today the same code is returning several errors on the build:
./src/styles.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/styles.scss
- Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: Undefined variable.
╷ 142 │ values: $utilities-border-colors
│ ^^^^^^^^^^^^^^^^^^^^^^^^
╵ node_modules\bootstrap\scss\_utilities.scss 142:15 #import src\styles.scss 7:9 root stylesheet
./src/styles.scss - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
╷
142 │ values: $utilities-border-colors
│ ^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules\bootstrap\scss\_utilities.scss 142:15 #import
src\styles.scss 7:9 root stylesheet
at tryRunOrWebpackError (C:\User\user\project\node_modules\webpack\lib\HookWebpackError.js:88:9)
at __webpack_require_module__ (C:\User\user\project\node_modules\webpack\lib\Compilation.js:4979:12)
at __webpack_require__ (C:\User\user\project\node_modules\webpack\lib\Compilation.js:4936:18)
at C:\User\user\project\node_modules\webpack\lib\Compilation.js:5007:20
at symbolIterator (C:\User\user\project\node_modules\neo-async\async.js:3485:9)
at done (C:\User\user\project\node_modules\neo-async\async.js:3527:9)
at Hook.eval [as callAsync] (eval at create (C:\User\user\project\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\User\user\project\node_modules\tapable\lib\Hook.js:18:14)
at C:\User\user\project\node_modules\webpack\lib\Compilation.js:4914:43
at symbolIterator (C:\User\user\project\node_modules\neo-async\async.js:3482:9)
at timesSync (C:\User\user\project\node_modules\neo-async\async.js:2297:7)
at Object.eachLimit (C:\User\user\project\node_modules\neo-async\async.js:3463:5)
at C:\User\user\project\node_modules\webpack\lib\Compilation.js:4879:16
at symbolIterator (C:\User\user\project\node_modules\neo-async\async.js:3485:9)
at timesSync (C:\User\user\project\node_modules\neo-async\async.js:2297:7)
at Object.eachLimit (C:\User\user\project\node_modules\neo-async\async.js:3463:5)
-- inner error --
Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
╷
142 │ values: $utilities-border-colors
│ ^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules\bootstrap\scss\_utilities.scss 142:15 #import
src\styles.scss 7:9 root stylesheet
at Object.<anonymous> (C:\User\user\project\node_modules\css-loader\dist\cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!C:\User\user\project\node_modules\postcss-loader\dist\cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!C:\User\user\project\node_modules\resolve-url-loader\index.js??ruleSet[1].rules[6].rules[1].use[0]!C:\User\user\project\node_modules\sass-loader\dist\cjs.js??ruleSet[1].rules[6].rules[1].use[1]!C:\User\user\project\src\styles.scss:1:7)
at C:\User\user\project\node_modules\webpack\lib\javascript\JavascriptModulesPlugin.js:432:11
at Hook.eval [as call] (eval at create (C:\User\user\project\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:7:1)
at Hook.CALL_DELEGATE [as _call] (C:\User\user\project\node_modules\tapable\lib\Hook.js:14:14)
at C:\User\user\project\node_modules\webpack\lib\Compilation.js:4981:39
at tryRunOrWebpackError (C:\User\user\project\node_modules\webpack\lib\HookWebpackError.js:83:7)
at __webpack_require_module__ (C:\User\user\project\node_modules\webpack\lib\Compilation.js:4979:12)
at __webpack_require__ (C:\User\user\project\node_modules\webpack\lib\Compilation.js:4936:18)
at C:\User\user\project\node_modules\webpack\lib\Compilation.js:5007:20
at symbolIterator (C:\User\user\project\node_modules\neo-async\async.js:3485:9)
at done (C:\User\user\project\node_modules\neo-async\async.js:3527:9)
at Hook.eval [as callAsync] (eval at create (C:\User\user\project\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\User\user\project\node_modules\tapable\lib\Hook.js:18:14)
at C:\User\user\project\node_modules\webpack\lib\Compilation.js:4914:43
at symbolIterator (C:\User\user\project\node_modules\neo-async\async.js:3482:9)
at timesSync (C:\User\user\project\node_modules\neo-async\async.js:2297:7)
Generated code for C:\User\user\project\node_modules\css-loader\dist\cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!C:\User\user\project\node_modules\postcss-loader\dist\cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!C:\User\user\project\node_modules\resolve-url-loader\index.js??ruleSet[1].rules[6].rules[1].use[0]!C:\User\user\project\node_modules\sass-loader\dist\cjs.js??ruleSet[1].rules[6].rules[1].use[1]!C:\User\user\project\src\styles.scss
1 | throw new Error("Module build failed (from ./node_modules/sass-loader/dist/cjs.js):\nSassError: Undefined variable.\n ╷\n142 │ values: $utilities-border-colors\n │ ^^^^^^^^^^^^^^^^^^^^^^^^\n ╵\n node_modules\\bootstrap\\scss\\_utilities.scss 142:15 #import\n src\\styles.scss 7:9 root stylesheet");
I could reproduce it in local when I deleted the package-lock.json and generated one new.
This is my package.json
{
"name": "app-name",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve --host 0.0.0.0",
"dev": "ng serve --host 0.0.0.0 -c dev",
"debug": "ng serve --host 0.0.0.0 -c debug",
"serve:es5": "ng serve --configuration es5 --host 0.0.0.0",
"build:dev": "ng build --configuration=dev",
"build:preprod": "ng build --configuration=preprod",
"build:prod": "ng build --configuration=production",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular-architects/ddd": "^2.0.0",
"#angular/animations": "^13.2.2",
"#angular/cdk": "^13.2.2",
"#angular/common": "^13.2.2",
"#angular/compiler": "^13.2.2",
"#angular/core": "^13.2.2",
"#angular/forms": "^13.2.2",
"#angular/localize": "^13.2.2",
"#angular/material": "^13.2.2",
"#angular/material-moment-adapter": "^13.2.2",
"#angular/platform-browser": "^13.2.2",
"#angular/platform-browser-dynamic": "^13.2.2",
"#angular/router": "^13.2.2",
"#babel/runtime": "^7.16.0",
"#fortawesome/angular-fontawesome": "^0.10.0",
"#fortawesome/fontawesome-svg-core": "^1.3.0",
"#fortawesome/free-solid-svg-icons": "^6.0.0",
"#microsoft/applicationinsights-web": "^2.7.1",
"#ng-bootstrap/ng-bootstrap": "^12.0.0-beta.4",
"#ngrx/effects": "^13.0.2",
"#ngrx/store": "^13.0.2",
"#ngrx/store-devtools": "^13.0.2",
"#ngx-translate/core": "^10.0.2",
"#ngx-translate/http-loader": "^3.0.1",
"#popperjs/core": "^2.10.2",
"#types/bootstrap": "^5.1.6",
"#types/file-saver": "^2.0.3",
"#types/jquery": "^3.5.8",
"amplitude-js": "^8.17.0",
"bootstrap": "^5.1.3",
"bootstrap-icons": "^1.7.0",
"chart.js": "^2.9.4",
"classlist.js": "^1.1.20150312",
"core-js": "^2.6.12",
"dropzone": "^6.0.0-beta.2",
"file-saver": "^2.0.5",
"font-awesome": "^4.7.0",
"intl-tel-input": "^17.0.13",
"jquery": "^3.6.0",
"moment": "^2.29.1",
"ng-lottie": "git+https://github.com/Jrbebel/ng-lottie.git",
"ng2-nouislider": "^1.8.3",
"ngx-papaparse": "^5.0.0",
"nouislider": "^12.0.0",
"npm": "^8.11.0",
"poeditor-ci": "^1.15.0",
"pretty-checkbox": "^3.0.3",
"rxjs": "^6.6.7",
"tslib": "^2.0.0",
"uuid": "^3.4.0",
"xlsx": "^0.17.4",
"zone.js": "~0.11.4"
},
"devDependencies": {
"#angular-devkit/build-angular": "~13.1.3",
"#angular-eslint/builder": "^12.0.0",
"#angular-eslint/eslint-plugin": "^12.0.0",
"#angular-eslint/eslint-plugin-template": "^12.0.0",
"#angular-eslint/schematics": "^13.1.0",
"#angular-eslint/template-parser": "^12.0.0",
"#angular/cli": "^13.2.3",
"#angular/compiler-cli": "^13.0.0",
"#angular/language-service": "^13.2.2",
"#types/chart.js": "^2.9.34",
"#types/node": "^12.20.45",
"#typescript-eslint/eslint-plugin": "4.28.2",
"#typescript-eslint/parser": "4.28.2",
"codelyzer": "^6.0.0",
"eslint": "^7.26.0",
"eslint-plugin-import": "2.22.1",
"eslint-plugin-jsdoc": "30.7.6",
"eslint-plugin-prefer-arrow": "1.2.2",
"protractor": "^7.0.0",
"ts-node": "~7.0.0",
"tslint": "~6.1.0",
"typescript": "4.5.5"
}
}
I don't even use the $utilities-border-colors variables and aren't present in my code.
My node version is 16.16
My npm version is 8.14.0
Could be that I have to update any of the dependencies, and why if I didn't change anything, it just doesn't work now?
Thanks in advance.
As it's said in the comments by Krenom, removing the ^ from the Bootstrap import fixed the issue.
Thanks for the responses and all the info.
Bootstrap v5.2 introduced a new file called _maps.scss. You must add it to your main Sass file.
Load your bootstrap modules in this order:
#import "~bootstrap/scss/functions";
#import "~bootstrap/scss/variables";
#import "~bootstrap/scss/maps"; // **Newly added!**
#import "~bootstrap/scss/mixins";
#import "~bootstrap/scss/utilities";
#import "~bootstrap/scss/helpers";
#import "~bootstrap/scss/utilities/api";
The problem should be fixed now.
I'll be greedy and slap it as an answer so that it can be accepted and one is available for those that follow.
The dangers of using ^ style versioning. Any one of those things might have been installed as a slightly different version that now breaks something. Bootstrap, at a guess given the error message and a new version was pushed out yesterday according to npm. Start with that and lock it down to a specific version (maybe just 5.1.3 for now, so just remove the ^) and see if that builds again.
You are kind of right, it's a bit strange that it happened without changing anything.
The reason of that is that yesterday a commit
took place on the main branch of twbs/
bootstrap, the v5.2.0 update.
The easy way to revert the changes is to follow #krenom advice.
Additionally, if you mind to install the v5.2.0 update please make sure to be advised about the new Sass file _maps.scss that comes with several Sasss maps from _variables.scss.
You can read more here.
There is a new _map.scss in v5.2.0. Don't have the details regarding your Webpack build but you probably just need to #import "~bootstrap/scss/maps"; (that's where $utilities-border-colors is defined) before #import "~bootstrap/scss/utilities";.
You can try to remove your node_modules directory and package-lock.json file. Then npm install.
And check if the error still append.
As #krenom say, it coulb be highter boostrap version dowloaded during the build. You can remove the ^ before the version in your package.json and reinstall your node_modules.
You need to define other 'sass' modules for Boostrap.
If you define as below, the problem is solved.
// Bootstrap initializaton
#import '~bootstrap/scss/functions';
#import '~bootstrap/scss/variables';
#import '~bootstrap/scss/mixins';
#import "~bootstrap/scss/maps";
#import "~bootstrap/scss/utilities";
#import "~bootstrap/scss/helpers";
#import "~bootstrap/scss/utilities/api";

Why is Buffer assignment triggering an unsafe assignment error?

I have a TypeScript project that is leveraging ESLint. I have a class that utilizes a Buffer as a class attribute. I want to be able to set the buffer as part of construction.
example.ts
export class Example {
public myBuffer: Buffer
public constructor(myBuffer: Buffer) {
this.myBuffer = myBuffer
}
}
This block yields the following linter error:
5:3 error Unsafe assignment of an `any` value #typescript-eslint/no-unsafe-assignment
What is causing TypeScript to interpret this typed parameter as any? Do I need to somehow import the Buffer type?
As shown in this picture, my IDE does detect that "myBuffer" is of type Buffer:
My Dev Dependencies
"devDependencies": {
"#babel/cli": "^7.10.5",
"#babel/core": "^7.8.7",
"#babel/eslint-parser": "^7.17.0",
"#babel/node": "^7.8.7",
"#babel/plugin-proposal-class-properties": "^7.8.3",
"#babel/preset-env": "^7.8.7",
"#babel/register": "^7.8.6",
"#jest/console": "^25.1.0",
"#tsconfig/node16": "^1.0.2",
"#typescript-eslint/eslint-plugin": "^5.23.0",
"#typescript-eslint/parser": "^5.23.0",
"eslint": "^8.15.0",
"eslint-config-airbnb-base": "^15.0.0",
"eslint-config-airbnb-typescript": "^17.0.0",
"eslint-import-resolver-alias": "^1.1.2",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-sort-exports": "^0.6.0",
"jest": "^25.1.0",
"nock": "^12.0.2",
"rimraf": "^3.0.2",
"typescript": "^4.6.4"
}
Silly me!
The issue is that I had not added #types/node as a project dependency. Since Buffer exists within Node (rather than TypeScript) the type was not defined when linting without that addition.
Running yarn add --dev #types/node (or npm install #types/node --save-dev) does the trick.

React-static build error: ERR_REQUIRE_ESM or ReferenceError: window is not defined

I have no idea how to solve this, but I tried many things that are probably just silly. I'd just like to finish changing my react-app to be a react-static-app, so I can finish my project. Everething works localy and I kind of know it has something to do with server vs client side JS, but I don't know where to start. Please help.
This is the error I get from regular yarn build:
[ERR_REQUIRE_ESM]: Must use import to load ES Module:
C:\my-projoect\node_modules\#babel\runtime\helpers\esm\objectWithoutPropertiesLoose.js
require() of ES modules is not supported.
require() of C:\my-projoect\node_modules\#babel\runtime\helpers\esm\objectWithoutPropertiesLoose.js
from C:\moji-projekt i\rost-static\node_modules\react-spring\renderprops.js is an ES module file as
it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js
files in that package scope as ES modules.
Instead rename objectWithoutPropertiesLoose.js to end in .cjs, change the requiring code to use
import(), or remove "type": "module" from
C:\my-projoect\node_modules\#babel\runtime\helpers\esm\package.json.
An this is what I get when I run yarn build --debug:
ReferenceError: window is not defined
Withouth any indication where the problem is. I've placed if(typeof window === "undefined") return null; all around my project, but no luck.
Here's my package.json in case it could help to slove the issue:
{
"name": "rost-react-static",
"private": true,
"scripts": {
"start": "react-static start",
"stage": "react-static build --staging",
"build": "react-static build",
"analyze": "react-static build --analyze",
"serve": "serve dist -p 3000"
},
"dependencies": {
"#reach/router": "^1.3.4",
"#rooks/use-window-size": "^4.8.0",
"#tinymce/tinymce-react": "^3.10.1",
"#types/react": "^16.8.6",
"axios": "^0.21.1",
"bootstrap": "^4.5.3",
"dotenv": "^8.2.0",
"emailjs-com": "^2.6.4",
"firebase": "^8.0.0",
"particles-bg": "^2.5.0",
"react": "^16.14.0",
"react-bootstrap": "^1.4.0",
"react-dom": "^16.14.0",
"react-ga": "^3.3.0",
"react-google-recaptcha": "^2.1.0",
"react-google-recaptcha-v3": "^1.7.0",
"react-helmet": "^6.1.0",
"react-hot-loader": "^4.13.0",
"react-html-parser": "^2.0.2",
"react-icons": "^4.2.0",
"react-particle-image": "^1.0.1",
"react-phone-number-input": "^3.1.10",
"react-player": "^2.7.0",
"react-redux": "^7.2.2",
"react-spring": "^8.0.27",
"react-static": "^7.5.1",
"react-static-plugin-reach-router": "^7.5.1",
"react-static-plugin-sass": "^7.3.0",
"react-static-plugin-sitemap": "^7.5.1",
"react-static-plugin-source-filesystem": "^7.5.1",
"recaptcha-v3": "^1.8.0",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",
"web-vitals": "^0.2.4"
},
"devDependencies": {
"#types/react": "^16.8.6",
"babel-eslint": "^10.1.0",
"eslint": "^7.20.0",
"eslint-config-react-app": "^6.0.0",
"eslint-config-react-tools": "^1.1.7",
"eslint-plugin-flowtype": "^5.2.2",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.22.0",
"eslint-plugin-react-hooks": "^4.2.0",
"serve": "^11.3.2"
}
}
I assume that you have missed some reference to window or there is some reference to window in some module you are using.
As per the react-static docs:
'Because React-Static code is both used in the browser during runtime and in node during build and export, it is very important that ALL your code be "universal" or in other words "node safe".'
https://github.com/react-static/react-static/blob/master/docs/concepts.md#writing-universal-node-safe-code
So checking for window with typeof, fixed this for me.
// works
const browserVar = typeof window !== 'undefined' && window.method ? 'browser' : 'node'
// does not work
const browserVar = window && window.method ? 'browser' : 'node'

How to fix npm repository, when Validation Error occurs?

I encountered a problem when building a project with angular.
To build, I use:
npm install
To run, I use:
npm install
I'm getting an error:
ERROR in ./node_modules/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0 Module build failed: Validation Error
URL Loader Invalid Options
options['name'] should NOT have additional properties options.limit should be number
# ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader?{"ident":"postcss"}!./node_modules/font-awesome/css/font-awesome.min.css 6:412-465 # ./node_modules/font-awesome/css/font-awesome.min.css # multi (webpack)-dev-server/client?http://localhost:4200 ./node_modules/bootstrap/dist/css/bootstrap.min.css ./node_modules/font-awesome/css/font-awesome.min.css ./node_modules/quill/dist/quill.snow.css ./src/styles.scss
ERROR in ./node_modules/font-awesome/fonts/fontawesome-webfont.woff?v=4.7.0 Module build failed: Validation Error
URL Loader Invalid Options
options['name'] should NOT have additional properties options.limit should be number
# ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader?{"ident":"postcss"}!./node_modules/font-awesome/css/font-awesome.min.css 6:495-547 # ./node_modules/font-awesome/css/font-awesome.min.css # multi (webpack)-dev-server/client?http://localhost:4200 ./node_modules/bootstrap/dist/css/bootstrap.min.css ./node_modules/font-awesome/css/font-awesome.min.css ./node_modules/quill/dist/quill.snow.css ./src/styles.scss
ERROR in ./node_modules/font-awesome/fonts/fontawesome-webfont.ttf?v=4.7.0 Module build failed: Validation Error
URL Loader Invalid Options
options['name'] should NOT have additional properties options.limit should be number
# ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader?{"ident":"postcss"}!./node_modules/font-awesome/css/font-awesome.min.css 6:576-627 # ./node_modules/font-awesome/css/font-awesome.min.css # multi (webpack)-dev-server/client?http://localhost:4200 ./node_modules/bootstrap/dist/css/bootstrap.min.css ./node_modules/font-awesome/css/font-awesome.min.css ./node_modules/quill/dist/quill.snow.css ./src/styles.scss
I tried buid this on Windows 10, and on Ubuntu 18.04.
npm -v
6.4.1
node -v
v10.14.2
dependencies stored in package.json:
"dependencies": {
"#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/uuid": "3.4.4",
"blueimp-load-image": "2.18.0",
"bootstrap": "4.0.0-beta.3",
"core-js": "2.4.1",
"exif-js": "2.3.0",
"file-saver": "1.3.3",
"font-awesome": "4.7.0",
"jquery": "3.2.1",
"mydatepicker": "2.6.1",
"ngx-quill": "1.6.0",
"popper.js": "1.12.5",
"rxjs": "5.4.2",
"tether": "1.4.0",
"zone.js": "0.8.14"
},
"devDependencies": {
"#angular/cli": "1.4.5",
"#angular/compiler-cli": "4.2.4",
"#angular/language-service": "4.2.4",
"#types/node": "^6.14.2",
"autoprefixer": "6.5.3",
"circular-dependency-plugin": "3.0.0",
"codelyzer": "~3.2.0",
"copy-webpack-plugin": "4.0.1",
"css-loader": "0.28.1",
"cssnano": "3.10.0",
"exports-loader": "0.6.3",
"file-loader": "0.10.0",
"html-webpack-plugin": "2.29.0",
"istanbul-instrumenter-loader": "2.0.0",
"less-loader": "4.0.5",
"license-webpack-plugin": "1.1.1",
"postcss-loader": "1.3.3",
"postcss-url": "5.1.2",
"protractor": "~5.1.2",
"raw-loader": "0.5.1",
"sass-loader": "6.0.3",
"source-map-loader": "0.2.0",
"style-loader": "0.13.1",
"stylus-loader": "3.0.1",
"ts-node": "~3.2.0",
"tslint": "~5.7.0",
"typescript": "~2.3.3",
"url-loader": "0.6.0",
"webpack": "~3.6.0",
"webpack-concat-plugin": "1.4.0",
"webpack-dev-server": "~2.7.1"
}
Probably some of these libraries are not used, but I do not want to delete them. Should I update some of them?
An error occurred during building and I did not see it. The error was connected with old version with font-awesome.

What causes an error with traceur when moving Angular2 application to new system?

I have an application built in Angular2 RC5. I started my app in Angular2-Beta2.0.0. I am trying to copy the application to another system to do further development. The primary system still works with no issue, but when I pull down the same code to my 2nd system I get this error every time I start my application. I cant find any mention of traceur anywhere in my project files. I dont know what this is. The app still works fine on my orig system.
zone.js:461 Unhandled Promise rejection: Error: XHR error (404 Not Found) loading http://localhost:4200/traceur
Anyone know what this is and how to fix it?
Whole Error
zone.js:463 Error: Uncaught (in promise): Error: Error: XHR error (404 Not Found) loading http://localhost:4200/traceur
at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:4200/vendor/zone.js/dist/zone.js:769:30)
at ZoneDelegate.invokeTask (http://localhost:4200/vendor/zone.js/dist/zone.js:356:38)
at Zone.runTask (http://localhost:4200/vendor/zone.js/dist/zone.js:256:48)
at XMLHttpRequest.ZoneTask.invoke (http://localhost:4200/vendor/zone.js/dist/zone.js:423:34)
Error loading http://localhost:4200/traceur
Error loading http://localhost:4200/vendor/#angular/platform-browser-dynamic/index.js as "#angular/platform-browser-dynamic" from http://localhost:4200/main.js
at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:4200/vendor/zone.js/dist/zone.js:769:30)
at ZoneDelegate.invokeTask (http://localhost:4200/vendor/zone.js/dist/zone.js:356:38)
at Zone.runTask (http://localhost:4200/vendor/zone.js/dist/zone.js:256:48)
at XMLHttpRequest.ZoneTask.invoke (http://localhost:4200/vendor/zone.js/dist/zone.js:423:34)
Error loading http://localhost:4200/traceur
Error loading http://localhost:4200/vendor/#angular/platform-browser-dynamic/index.js as "#angular/platform-browser-dynamic" from http://localhost:4200/main.js
at resolvePromise (http://localhost:4200/vendor/zone.js/dist/zone.js:538:32)
at resolvePromise (http://localhost:4200/vendor/zone.js/dist/zone.js:523:18)
at http://localhost:4200/vendor/zone.js/dist/zone.js:571:18
at ZoneDelegate.invokeTask (http://localhost:4200/vendor/zone.js/dist/zone.js:356:38)
at Zone.runTask (http://localhost:4200/vendor/zone.js/dist/zone.js:256:48)
at drainMicroTaskQueue (http://localhost:4200/vendor/zone.js/dist/zone.js:474:36)
at XMLHttpRequest.ZoneTask.invoke (http://localhost:4200/vendor/zone.js/dist/zone.js:426:22)consoleError # zone.js:463_loop_1 # zone.js:490drainMicroTaskQueue # zone.js:494ZoneTask.invoke # zone.js:426
package.json
{
"name": "prod-campus-081616",
"version": "0.0.0",
"license": "MIT",
"angular-cli": {},
"scripts": {
"mongoService": "../Mongo/bin/mongod",
"StartElasticSearch": "/usr/local/bin/elasticsearch",
"StartKibana453": "/usr/local/kibana/bin/kibana",
"node-start": "node ./bin/www",
"angular-start": "ng serve --live-reload false",
"postinstall": "typings install",
"lint": "tslint \"src/**/*.ts\"",
"test": "ng test",
"pree2e": "webdriver-manager update",
"e2e": "protractor"
},
"private": true,
"dependencies": {
"#angular/common": "^2.0.0-rc.5",
"#angular/compiler": "^2.0.0-rc.5",
"#angular/core": "^2.0.0-rc.5",
"#angular/forms": "0.3.0",
"#angular/http": "2.0.0-rc.5",
"#angular/platform-browser": "^2.0.0-rc.5",
"#angular/platform-browser-dynamic": "^2.0.0-rc.5",
"#angular/router": "3.0.0-rc.1",
"angular2-oauth2": "^1.3.10",
"aws-sdk": "^2.5.0",
"aws-sign": "^0.1.2",
"body-parser": "~1.15.1",
"cookie-parser": "~1.4.3",
"debug": "~2.2.0",
"es6-shim": "0.35.1",
"express": "~4.13.4",
"fs": "0.0.2",
"hbs": "~4.0.0",
"jsonwebtoken": "^7.1.9",
"moment": "^2.14.1",
"mongoosastic": "^4.0.2",
"mongoose": "^4.5.9",
"mongoose-unique-validator": "^1.0.2",
"morgan": "~1.7.0",
"multer": "^1.2.0",
"multer-s3": "^2.3.2",
"ng2-bootstrap": "^1.0.24",
"ng2-dropdown": "0.0.12",
"ng2-file-upload": "^1.0.3",
"password-hash": "^1.2.2",
"path": "^0.12.7",
"reflect-metadata": "0.1.3",
"rxjs": "5.0.0-beta.6",
"s3fs": "^2.4.8",
"serve-favicon": "~2.3.0",
"systemjs": "0.19.26",
"uuid": "^2.0.2",
"zone.js": "0.6.12"
},
"devDependencies": {
"angular-cli": "1.0.0-beta.10",
"codelyzer": "0.0.20",
"ember-cli-inject-live-reload": "1.4.0",
"jasmine-core": "2.4.1",
"jasmine-spec-reporter": "2.5.0",
"karma": "0.13.22",
"karma-chrome-launcher": "0.2.3",
"karma-jasmine": "0.3.8",
"protractor": "3.3.0",
"ts-node": "0.5.5",
"tslint": "3.11.0",
"typescript": "1.8.10",
"typings": "1.3.1"
}
}
system-config.ts
"use strict";
// SystemJS configuration file, see links for more information
// https://github.com/systemjs/systemjs
// https://github.com/systemjs/systemjs/blob/master/docs/config-api.md
/***********************************************************************************************
* User Configuration.
**********************************************************************************************/
/** Map relative paths to URLs. */
const map: any = {
'moment': 'vendor/moment/moment.js',
'angular2-oauth2': 'vendor/angular2-oauth2',
'aws-sdk': 'vendor/aws-sdk',
'aws-sign': 'vendor/aws-sign',
'fs': 'vendor/fs',
'ng2-bootstrap': 'vendor/ng2-bootstrap',
'ng2-file-upload': 'vendor/ng2-file-upload'
};
/** User packages configuration. */
const packages: any = {
'angular2-oauth2': 'config.js',
'aws-sdk': 'index.js',
'aws-sign': 'index.js',
'ng2-bootstrap': 'ng2-bootstrap.js',
'ng2-file-upload': 'ng2-file-upload.js'
};
////////////////////////////////////////////////////////////////////////////////////////////////
/***********************************************************************************************
* Everything underneath this line is managed by the CLI.
**********************************************************************************************/
const barrels: string[] = [
// Angular specific barrels.
'#angular/core',
'#angular/common',
'#angular/compiler',
'#angular/forms',
'#angular/http',
'#angular/router',
'#angular/platform-browser',
'#angular/platform-browser-dynamic',
// Thirdparty barrels.
'rxjs',
// App specific barrels.
'app',
'app/shared',
'app/header',
'app/article',
'app/auth',
'app/community',
'app/device',
'app/error',
'app/message',
'app/physical-drive',
'app/profile',
'app/topic',
'app/dashboard',
'app/profile/profile-edit',
/** #cli-barrel */
];
const cliSystemConfigPackages: any = {};
barrels.forEach((barrelName: string) => {
cliSystemConfigPackages[barrelName] = { main: 'index' };
});
/** Type declaration for ambient System. */
declare var System: any;
// Apply the CLI SystemJS configuration.
System.config({
map: {
'#angular': 'vendor/#angular',
'rxjs': 'vendor/rxjs',
'main': 'main.js'
},
packages: cliSystemConfigPackages
});
// Apply the user's configuration.
System.config({ map, packages });
SHORT ANSWER
If you run into this and have a working version of of your app on another box, copy the node_modules folder from the working system to the one having the issue, delete the contents of your dist folder, and restart your app.
LONG ANSWER
After searching everywhere I decided that this had to be related to packages that have been updated between the RC versions of Angular2 (I started this app with Beta2) and something that must have been changed or removed with newer versions that was there previously. Basically it seems like something was installed previously that no longer is getting installed now.
Note:
System A has always been working
System B never worked
I copied my entire node_modules folder from System A to System B. Restarted Node and Angular2 and everything was working. So I examined this node_modules folder from System A in comparison to the one generated from System B by running an npm install after deleting the node_modules folder.
I noticed that platform-browser-dynamic has been seriously thinned out since I first installed it. (120 items on System A vs 66 items on System B)
My package.json file is identicle on both System A and B with this line:
"#angular/platform-browser-dynamic": "^2.0.0-rc.5",
As a first test I copied the entire folder from A to B.
Result:
Error changed, no longer complained about platform-browser-dynamic, now it said:
Error loading http://localhost:4200/traceur
Error loading http://localhost:4200/vendor/#angular/core/index.js as "#angular/core"
The same thing happened as I replaced Core, Compiler, Platform-browser and Common.
Once all of those folders had been replaced with the version from my other system, everything started working.
This is great, however I must say it makes me wonder how I will ever be able to deploy this app. I dont know how I could have caused this, (Welcome to suggestions), so I'm hoping this is an issue that gets resolved with the final release of Angular2.

Resources