fallbackLoader option has been deprecated

[fals]

Some package is causing this issue, but I can't figure out which one. I'm using a configuration just similar to yours:

package.json

{
  "name": "app",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "clean": "rimraf node_modules doc dist && npm cache clean",
    "clean-install": "npm run clean && npm install",
    "clean-start": "npm run clean-install && npm start",
    "watch": "webpack --watch --progress --profile",
    "build": "rimraf dist && webpack --progress --profile --bail",
    "server": "webpack-dashboard -- webpack-dev-server --inline --port 8080",
    "webdriver-update": "webdriver-manager update",
    "webdriver-start": "webdriver-manager start",
    "lint": "tslint --force \"src/**/*.ts\"",
    "e2e": "protractor",
    "e2e-live": "protractor --elementExplorer",
    "pretest": "npm run lint",
    "test": "karma start",
    "posttest": "remap-istanbul -i coverage/json/coverage-final.json -o coverage/html -t html",
    "test-watch": "karma start --no-single-run --auto-watch",
    "ci": "npm run e2e && npm run test",
    "docs": "typedoc --options typedoc.json src/app/app.component.ts",
    "start": "npm run server",
    "start:hmr": "npm run server -- --hot",
    "postinstall": "npm run webdriver-update"
  },
  "dependencies": {
    "@angular/common": "~2.1.1",
    "@angular/compiler": "~2.1.1",
    "@angular/core": "~2.1.1",
    "@angular/forms": "~2.1.1",
    "@angular/http": "~2.1.1",
    "@angular/platform-browser": "~2.1.1",
    "@angular/platform-browser-dynamic": "~2.1.1",
    "@angular/router": "~3.1.1",
    "@angular/upgrade": "~2.1.1",
    "angular-in-memory-web-api": "~0.1.13",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.8",
    "rxjs": "5.0.0-beta.12",
    "systemjs": "0.19.39",
    "zone.js": "^0.6.25",
    "primeng": "2.0.0-rc.1",
    "file-saver": "1.3.3",
    "font-awesome": "4.7.0",
    "ng2-bs3-modal": "0.10.4"
  },
  "devDependencies": {
    "@angularclass/hmr": "^1.0.1",
    "@angularclass/hmr-loader": "^3.0.2",
    "@types/core-js": "^0.9.0",
    "@types/jasmine": "^2.2.29",
    "@types/node": "^6.0.38",
    "@types/selenium-webdriver": "2.53.33",
    "@types/lodash": "4.14.50",
    "angular2-template-loader": "^0.6.0",
    "angular2-router-loader": "0.3.4",
    "autoprefixer": "^6.3.2",
    "awesome-typescript-loader": "^2.2.4",
    "codelyzer": "1.0.0-beta.3",
    "copy-webpack-plugin": "^4.0.0",
    "css-loader": "^0.25.0",
    "extract-text-webpack-plugin": "^2.0.0-beta.4",
    "file-loader": "^0.9.0",
    "html-loader": "^0.4.0",
    "html-webpack-plugin": "^2.8.1",
    "istanbul-instrumenter-loader": "^0.2.0",
    "jasmine-core": "^2.3.4",
    "jasmine-spec-reporter": "^2.4.0",
    "json-loader": "^0.5.3",
    "karma": "1.3.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-coverage": "^1.0.0",
    "karma-jasmine": "^1.0.2",
    "karma-mocha-reporter": "^2.0.3",
    "karma-phantomjs-launcher": "^1.0.0",
    "karma-remap-istanbul": "0.2.1",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "1.8.0",
    "node-sass": "^3.4.2",
    "null-loader": "0.1.1",
    "phantomjs-prebuilt": "^2.1.4",
    "postcss-loader": "^1.1.0",
    "protractor": "^4.0.10",
    "raw-loader": "0.5.1",
    "remap-istanbul": "^0.6.4",
    "rimraf": "^2.5.1",
    "sass-loader": "^4.0.0",
    "shelljs": "^0.7.0",
    "style-loader": "^0.13.0",
    "ts-helpers": "^1.1.1",
    "tslint": "^3.4.0",
    "tslint-loader": "^2.1.0",
    "typedoc": "^0.5.1",
    "typescript": "2.0.6",
    "url-loader": "^0.5.6",
    "webpack": "^2.1.0-beta.25",
    "webpack-dashboard": "^0.2.0",
    "webpack-dev-server": "2.1.0-beta.9",
    "ng2-brpipes": "~1.0.1"
  }
}

Issue

fallbackLoader option has been deprecated - replace with "fallback"
loader option has been deprecated - replace with "use"

I found this angular/angular-cli#4435, but has nothing to do with webpack.

Also notice that the issue is the extract-text-webpack-plugin that changed something at configuration, then I tried to fix an older version, but got other kinds of errors due other packages, to be more precisely, 404 Resource not found listing all my component.html files .

[mcescalante]

Are you using angular-cli with this repo, like to serve the application?

[fals]

@mcescalante I'm using the exactly same stuff you are. I just cloned your branch to start my project, and any change you made or any issue I have with webpack I just come here to check out the solution. This issue started yesterday, with a clean npm install

[fals]

@mcescalante As I said, the issue is related to extract-text-webpack-plugin, but when I fix out some version other error occur.

[mcescalante]

@fals these warnings have to do with a vocabulary change needed in webpack.config.js for webpack 2; loader and fallbackLoader are replaced with use and fallback

I don't have time to open the PR now but I fixed these warnings this locally with a fresh clone. Here is a gist of the webpack config if you need to get rid of these warnings right away: https://gist.github.com/mcescalante/703997f94ebbe4585d1bf2d0016f1054

I will open a PR for this when I finish meetings today.

[fals]

@mcescalante This solve the fallbackLoader , but now every css file fails to load.

[mcescalante]

Good catch @fals, I'm in a meeting so that gist was half-baked. I'll finish this solution and comment again when I have it today. For now, you should be fine with what's here and just live with some warnings :)

[mcescalante]

@fals I just updated the gist (URL is the same, https://gist.github.com/mcescalante/703997f94ebbe4585d1bf2d0016f1054) and I believe it is working. Can you give this one a shot for me?

[fals]

@mcescalante Same as before. Every component that imports any kind of css fails. It's frustrating, I already tried early this solution that by my self, but I tried yours again to checkout if I missed something.

[mcescalante]

This looks like an error being thrown from your own custom component code. If you try my updated config in a fresh clone with no custom components, it seems to be working fine.

About your error, it looks like you may have written your component incorrectly; you do not need require() there and to use a external template file you want templateUrl not template. You also want styleUrls and not styles. See this standard component definition:

@Component({
  selector: 'my-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})

If you "mock" the structure & files for home & about components in this repo, everything should work fine. I am in the gitter for this project right now if you prefer to ask me questions there.

[fals]

@mcescalante You are wrong, the code I posted is from the Chrome, my code is like yours.

It's frustrating, someone changed something in the last 24 hours that broke webpack for those that are using your branch as base to their projects. I have 5 developers in stand by right now because of this error.

[Foxandxss]

I will take a peak. I should definitely update to latest versions. I Will take a peek tomorrow, hands full for today (well, 22:20 in here :P)

[fals]

@Foxandxss After replace my entire package.json and webpack.config.js for yours, I have a template loading issue, due zone.js

[Foxandxss]

replace with mine? I thought your project was using mine to start with heh.

[fals]

@Foxandxss e @mcescalante

I found the issue that is related to an newer package version of angular2-template-loader 0.6.1.

you should set the absolute version at the package.json to avoid this issue:

"angular2-template-loader": "0.6.0"

[mcescalante]

This should be fixed now via updates since this issue was opened - I just did a fresh clone and install/run to confirm. If you are still seeing this output with an updated copy or fresh clone, just comment.