Using custom webpack loaders

[akeelnazir]

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'
  }

[filipesilva]

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 #1656. You can read there what the final word on that topic is for now.

[JohannesHoppe]

@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');

[paulcpk]

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

[JohannesHoppe]

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!

[FloNeu]

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.

[camsong]

Blocked by this issue, any updates in 2019???
@filipesilva

[camsong]

@hansl please be open, this made many developers drop Angular to choose React and Vue!!!

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}