Issues downgrading from Angular 4 to Angular 2, related to sass-loader and CSS modules

Other Questions NPM
1

I tried to update my application from Angular 2.4.1 to Angular 4, but I faced various problems with my npm modules. So, I chose to revert back to Angular 2. However, I’m now running into sass-loader issues that weren’t there before the downgrade.

Even after I restored my package.json file to its previous state, deleted the node_modules directory, and reinstalled everything using npm install, I still get this error:

ERROR in ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader!./~/sass-loader/lib/loader.js!./src/styles.scss
Module not found: Error: Can't resolve '../node_modules/font-awesome/css/font-awesome.css' in '/Applications/MAMP/htdocs/rosebud-web/src'
 @ ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader!./~/sass-loader/lib/loader.js!./src/styles.scss 3:10-190
 @ ./src/styles.scss
 @ multi ./src/styles.scss ./~/ng2-toasty/style-default.css

Here are my current package.json dependencies:

{
  "dependencies": {
    "@angular/common": "^2.4.0",
    "@angular/compiler": "^2.4.0",
    "@angular/core": "^2.4.0",
    "@angular/forms": "^2.4.0",
    "@angular/http": "^2.4.0",
    "@angular/platform-browser": "^2.4.0",
    "@angular/platform-browser-dynamic": "^2.4.0",
    "@angular/router": "^3.4.0",
    "@types/jspdf": "^1.1.31",
    "@types/lodash": "^4.14.36",
    "@types/request": "0.0.30",
    "angular2-focus": "^1.1.0",
    "angular2-moment": "^1.3.0",
    "angular2-signaturepad": "^2.2.0",
    "angularfire2": "^2.0.0-beta.4",
    "core-js": "^2.4.1",
    "firebase": "^3.6.6",
    "firebase-queue": "^1.5.0",
    "jspdf": "^1.3.3",
    "lodash": "^4.15.0",
    "ng-semantic": "^1.1.13",
    "ng2-datepicker": "^1.8.2",
    "ng2-file-upload": "^1.2.0",
    "ng2-toasty": "^4.0.0",
    "rxjs": "^5.1.0",
    "zone.js": "^0.7.6"
  },
  "devDependencies": {
    "@angular/cli": "1.0.0-beta.32.3",
    "@angular/compiler-cli": "^2.4.0",
    "@types/jasmine": "2.5.38",
    "@types/node": "~6.0.60",
    "angular-cli": "^1.0.0-beta.21",
    "codelyzer": "~2.0.0-beta.4",
    "firebase-server": "^0.9.1",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.0.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "~0.2.2",
    "protractor": "~5.1.0",
    "ts-node": "~2.0.0",
    "tslint": "~4.4.2",
    "typescript": "~2.0.0"
  }
}

What additional steps should I take to clean up after this downgrade?

2

weird that npm cache isnt mentioned much but try npm cache verify first then clear it completely. also check if theres any global angular-cli version conflicts - run npm list -g @angular/cli and uninstall/reinstall if needed. downgrading angular versions often leaves webpack config fragments that mess with path resolution even after fresh installs.

3

I’ve encountered this exact issue before and it’s quite frustrating. The problem likely goes deeper than just package dependencies - there are hidden cache files and configuration remnants that npm install doesn’t always clear properly. Try deleting your package-lock.json file along with node_modules, then run npm install again. Angular CLI stores internal webpack configurations that can get corrupted during version switches. You might also want to check if there’s a .angular-cli.json.bak or similar backup file that got created during the upgrade attempt. Another thing that worked for me was temporarily moving the entire project to a fresh directory and doing a clean git checkout, then copying over only the essential files like src/ and package.json. The font-awesome path error suggests webpack’s module resolution is still looking in the wrong places, which often happens when CLI tool versions don’t match properly with the Angular version you’re targeting.

4

The sass-loader path resolution issue you’re encountering typically stems from webpack configuration changes that persist even after downgrading. I had a similar situation when reverting from Angular 4 back to 2.x. Beyond clearing node_modules and restoring package.json, check if your angular-cli.json file has lingering configuration changes from the Angular 4 upgrade attempt. Sometimes, CLI version mismatch creates webpack resolver conflicts. Try running npm cache clean --force before reinstalling dependencies. Also, verify that your src/styles.scss isn’t trying to import font-awesome using a relative path that worked in Angular 4 but breaks in 2.x due to different webpack configurations. If the issue persists, temporarily remove the font-awesome import from styles.scss and add it directly to angular-cli.json under the styles array instead to bypass the sass-loader path resolution entirely.