Aspnetcore-angular-universal: Cannot pull in font-awesome. The file loaders in the template don't seem to work?

[pjmagee]

The template uses an external CDN to pull in bootstrap and font-awesome so I removed that uncommented vendor.css and tried to use webpack for font-awesome with the existing webpack config but it causes errors...

ERROR in ./~/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0
    Module parse failed: C:\Projects\project\node_modules\font-awesome\fonts\fontawesome-webfont.woff2?v=4.7.0 Unexpected character ' ' (1:4)
    You may need an appropriate loader to handle this file type.
    (Source code omitted for this binary file)
     @ ./~/font-awesome/css/font-awesome.css 6:479-532
     @ dll vendor

    ERROR in ./~/font-awesome/fonts/fontawesome-webfont.eot?v=4.7.0
    Module parse failed: C:\Projects\project\node_modules\font-awesome\fonts\fontawesome-webfont.eot?v=4.7.0 Unexpected character '�' (1:1)
    You may need an appropriate loader to handle this file type.
    (Source code omitted for this binary file)
     @ ./~/font-awesome/css/font-awesome.css 6:304-355
     @ dll vendor

    ERROR in ./~/font-awesome/fonts/fontawesome-webfont.eot
    Module parse failed: C:\Projects\project\node_modules\font-awesome\fonts\fontawesome-webfont.eot Unexpected character '�' (1:1)
    You may need an appropriate loader to handle this file type.
    (Source code omitted for this binary file)
     @ ./~/font-awesome/css/font-awesome.css 6:378-421
     @ dll vendor

    ERROR in ./~/font-awesome/fonts/fontawesome-webfont.woff?v=4.7.0
    Module parse failed: C:\Projects\project\node_modules\font-awesome\fonts\fontawesome-webfont.woff?v=4.7.0 Unexpected character ' ' (1:4)
    You may need an appropriate loader to handle this file type.
    (Source code omitted for this binary file)
     @ ./~/font-awesome/css/font-awesome.css 6:563-615
     @ dll vendor

    ERROR in ./~/font-awesome/fonts/fontawesome-webfont.ttf?v=4.7.0
    Module parse failed: C:\Projects\project\node_modules\font-awesome\fonts\fontawesome-webfont.ttf?v=4.7.0 Unexpected character ' ' (1:0)
    You may need an appropriate loader to handle this file type.
    (Source code omitted for this binary file)
     @ ./~/font-awesome/css/font-awesome.css 6:645-696
     @ dll vendor

    ERROR in ./~/font-awesome/fonts/fontawesome-webfont.svg?v=4.7.0
    Module parse failed: C:\Projects\project\node_modules\font-awesome\fonts\fontawesome-webfont.svg?v=4.7.0 Unexpected token (1:0)
    You may need an appropriate loader to handle this file type.
    | <?xml version="1.0" standalone="no"?>
    | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
    | <svg>
     @ ./~/font-awesome/css/font-awesome.css 6:730-781
     @ dll vendor

    ERROR in ./~/font-awesome/css/font-awesome.css
    Module build failed: Error
        at C:\Projects\project\node_modules\webpack\lib\NormalModule.js:208:34
        at C:\Projects\project\node_modules\webpack\lib\NormalModule.js:162:10
        at C:\Projects\project\node_modules\loader-runner\lib\LoaderRunner.js:370:3
        at iterateNormalLoaders (C:\Projects\project\node_modules\loader-runner\lib\LoaderRunner.js:211:10)
        at C:\Projects\project\node_modules\loader-runner\lib\LoaderRunner.js:202:4
        at C:\Projects\project\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:62:14
        at _combinedTickCallback (internal/process/next_tick.js:67:7)
        at process._tickCallback (internal/process/next_tick.js:98:9)

    ERROR in C:\Projects\project\node_modules\extract-text-webpack-plugin\loader.js??ref--0-0!C:\Projects\project\node_modules\css-loader\index.js!C:\Projects\project\node_modules\font-awesome\css\font-awesome.css doesn't export content
    Child extract-text-webpack-plugin:

        ERROR in ./~/font-awesome/fonts/fontawesome-webfont.eot?v=4.7.0
        Module parse failed: C:\Projects\project\node_modules\font-awesome\fonts\fontawesome-webfont.eot?v=4.7.0 Unexpected character '�' (1:1)
        You may need an appropriate loader to handle this file type.
        (Source code omitted for this binary file)
         @ ./~/css-loader!./~/font-awesome/css/font-awesome.css 6:304-355

        ERROR in ./~/font-awesome/fonts/fontawesome-webfont.eot
        Module parse failed: C:\Projects\project\node_modules\font-awesome\fonts\fontawesome-webfont.eot Unexpected character '�' (1:1)
        You may need an appropriate loader to handle this file type.
        (Source code omitted for this binary file)
         @ ./~/css-loader!./~/font-awesome/css/font-awesome.css 6:378-421

        ERROR in ./~/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0
        Module parse failed: C:\Projects\project\node_modules\font-awesome\fonts\fontawesome-webfont.woff2?v=4.7.0 Unexpected character ' ' (1:4)
        You may need an appropriate loader to handle this file type.
        (Source code omitted for this binary file)
         @ ./~/css-loader!./~/font-awesome/css/font-awesome.css 6:479-532

        ERROR in ./~/font-awesome/fonts/fontawesome-webfont.woff?v=4.7.0
        Module parse failed: C:\Projects\project\node_modules\font-awesome\fonts\fontawesome-webfont.woff?v=4.7.0 Unexpected character ' ' (1:4)
        You may need an appropriate loader to handle this file type.
        (Source code omitted for this binary file)
         @ ./~/css-loader!./~/font-awesome/css/font-awesome.css 6:563-615

        ERROR in ./~/font-awesome/fonts/fontawesome-webfont.ttf?v=4.7.0
        Module parse failed: C:\Projects\project\node_modules\font-awesome\fonts\fontawesome-webfont.ttf?v=4.7.0 Unexpected character ' ' (1:0)
        You may need an appropriate loader to handle this file type.
        (Source code omitted for this binary file)
         @ ./~/css-loader!./~/font-awesome/css/font-awesome.css 6:645-696

        ERROR in ./~/font-awesome/fonts/fontawesome-webfont.svg?v=4.7.0
        Module parse failed: C:\Projects\project\node_modules\font-awesome\fonts\fontawesome-webfont.svg?v=4.7.0 Unexpected token (1:0)
        You may need an appropriate loader to handle this file type.
        | <?xml version="1.0" standalone="no"?>
        | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
        | <svg>
         @ ./~/css-loader!./~/font-awesome/css/font-awesome.css 6:730-781
Child
    Hash: 605587eda234cc3bd20f
    Time: 9470ms
        Asset    Size  Chunks                    Chunk Names
    vendor.js  4.4 MB       0  [emitted]  [big]  vendor

    ERROR in ./~/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0
    Module parse failed: C:\Projects\project\node_modules\font-awesome\fonts\fontawesome-webfont.woff2?v=4.7.0 Unexpected character ' ' (1:4)
    You may need an appropriate loader to handle this file type.
    (Source code omitted for this binary file)
     @ ./~/css-loader!./~/font-awesome/css/font-awesome.css 6:479-532
     @ ./~/font-awesome/css/font-awesome.css
     @ dll vendor

    ERROR in ./~/font-awesome/fonts/fontawesome-webfont.woff?v=4.7.0
    Module parse failed: C:\Projects\project\node_modules\font-awesome\fonts\fontawesome-webfont.woff?v=4.7.0 Unexpected character ' ' (1:4)
    You may need an appropriate loader to handle this file type.
    (Source code omitted for this binary file)
     @ ./~/css-loader!./~/font-awesome/css/font-awesome.css 6:563-615
     @ ./~/font-awesome/css/font-awesome.css
     @ dll vendor

    ERROR in ./~/font-awesome/fonts/fontawesome-webfont.ttf?v=4.7.0
    Module parse failed: C:\Projects\project\node_modules\font-awesome\fonts\fontawesome-webfont.ttf?v=4.7.0 Unexpected character ' ' (1:0)
    You may need an appropriate loader to handle this file type.
    (Source code omitted for this binary file)
     @ ./~/css-loader!./~/font-awesome/css/font-awesome.css 6:645-696
     @ ./~/font-awesome/css/font-awesome.css
     @ dll vendor

    ERROR in ./~/font-awesome/fonts/fontawesome-webfont.eot?v=4.7.0
    Module parse failed: C:\Projects\project\node_modules\font-awesome\fonts\fontawesome-webfont.eot?v=4.7.0 Unexpected character '�' (1:1)
    You may need an appropriate loader to handle this file type.
    (Source code omitted for this binary file)
     @ ./~/css-loader!./~/font-awesome/css/font-awesome.css 6:304-355
     @ ./~/font-awesome/css/font-awesome.css
     @ dll vendor

    ERROR in ./~/font-awesome/fonts/fontawesome-webfont.eot
    Module parse failed: C:\Projects\project\node_modules\font-awesome\fonts\fontawesome-webfont.eot Unexpected character '�' (1:1)
    You may need an appropriate loader to handle this file type.
    (Source code omitted for this binary file)
     @ ./~/css-loader!./~/font-awesome/css/font-awesome.css 6:378-421
     @ ./~/font-awesome/css/font-awesome.css
     @ dll vendor

    ERROR in ./~/font-awesome/fonts/fontawesome-webfont.svg?v=4.7.0
    Module parse failed: C:\Projects\project\node_modules\font-awesome\fonts\fontawesome-webfont.svg?v=4.7.0 Unexpected token (1:0)
    You may need an appropriate loader to handle this file type.
    | <?xml version="1.0" standalone="no"?>
    | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
    | <svg>
     @ ./~/css-loader!./~/font-awesome/css/font-awesome.css 6:730-781
     @ ./~/font-awesome/css/font-awesome.css
     @ dll vendor

npm ERR! Windows_NT 10.0.10586
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "webpack-vendor"
npm ERR! node v7.5.0
npm ERR! npm  v4.1.2
npm ERR! code ELIFECYCLE
npm ERR! [email protected] webpack-vendor: `webpack --config webpack.config.vendor.js --progress`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] webpack-vendor script 'webpack --config webpack.config.vendor.js --progress'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the xperthr-peopleanalytics package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     webpack --config webpack.config.vendor.js --progress
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs xperthr-peopleanalytics
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls xperthr-peopleanalytics
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     C:\Projects\project\npm-debug.log
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
C:\Projects\project [newtemplate ≡]

I also noticed the webpack.config.js loaders tests don't match up with the same loaders and test regex that are inside the webpack.config.vendor.js.

[MarkPieszak]

Related to #87.
Yeah I've been swamped but I have that one on the radar, there seems to be some issue with webpack2 & font-awesome, as it worked previously in 1.x (that's why I ended up putting them back in the CDN for now, just to get things working).

I tried a few different methods online on getting it fixed, but nothing seemed to do the trick yet. Hopefully tonight I have some time today/tomorrow to get it all updated.
If you had any ideas, let us know!

[MarkPieszak]

@pjmagee Apologies for the delay, been a crazy past few weeks. Let me knock this one out real quick today for you!

[AbrarJahin]

That would be great :)

[pjmagee]

Closing this since it's been fixed on another issue!

[MarkPieszak]

Glad to hear it! 👍