Angular-cli: Using custom webpack loaders

Created on 19 Oct 2017 · 8Comments · Source: angular/angular-cli

Bug Report or Feature Request (mark with an `x`)

- [X ] feature request

Versions.

1.4.3

Desired functionality.

I have to load a custom loader to process .graphql files, I'd like to be able to add custom loaders to webpack config.

Mention any other details that might be useful.

The rule I want to add is

/* File loader for graphql files.
*  Returns file content as string
*/
  {
     test: /\.(graphql|gql)$/,
     exclude: /node_modules/,
     loader: 'graphql-tag/loader'
  }

Source

akeelnazir

👍7 🎉2

Most helpful comment

@akeelnazir

I came around here, because I have the exact same use-case. I want to use the graphql-tag/loader but without the burden of ng eject. You can do this instead:

const myQuery = require('graphql-tag/loader!./myQuery.graphql');

JohannesHoppe on 7 Feb 2018

🎉5

All 8 comments

I know this is not the answer you wanted but truth is this has been extensively discussed before, and so this issue is a duplicate of https://github.com/angular/angular-cli/issues/1656. You can read there what the final word on that topic is for now.

filipesilva on 25 Oct 2017

👎8 👍1

@akeelnazir

I came around here, because I have the exact same use-case. I want to use the graphql-tag/loader but without the burden of ng eject. You can do this instead:

const myQuery = require('graphql-tag/loader!./myQuery.graphql');

JohannesHoppe on 7 Feb 2018

🎉5

@JohannesHoppe
How and where exactly would you use this 🤔 ? Could you maybe give more explanation? Thanks!

paulcpk on 8 Feb 2018

The original poster obviously wants to import *.graphql files, for apollo. The usual way would be a configured webpack-loader. This is not possible with the angular-cli (exception: you ng eject the application). My require-statement does the same job and requires no changes to the webpack configuration. Cheers!

JohannesHoppe on 9 Feb 2018

👍3

Hello! Thx, guys - needed to do this too - the require works fine, but wondering... is there currently a better supported way of doing this... i would very much like to just use import-statement.