How to add new file extensions to resolve? (Webpack & angular-cli)

Question

In webpack you can configure the different file types/extensions, which you want to resolve. In angular-cli is no webpack-config.

Is there away to add/configure this kind of configuration? I would like that my application also takes *.tsx files.

Update

I know there is the ng eject, but I don't want to lose the CLI functionality. Is there another way?

Meligy · Accepted Answer · 2017-04-14 04:58:58Z

2

You can ~~fork the CLI and npm link your fork~~ run npm eject, which creates a copy of the Webpack configuration, and you can customize it yourself, not through the CLI anymore.

Check the official docs: Moving your project out of Angular CLI
And then if you want to revert it, you can move back in and lose customizations.

If you want to stick to what the CLI gives, then this is not available at the moment.

Webpack is currently hidden away from the end-user of the CLI as much as possible.

A CLI-specific (likely build-tool-independent, as in: non Webpack specific) extensibility / plugin architecture is to be considered for the Angular CLI v2.0.

edited Apr 14, 2017 at 4:58

answered Feb 2, 2017 at 19:58

Meligy

36.7k11 gold badges90 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

tschaka1904 Over a year ago

Okay! Thanks for the answer. Have you, by any chance, ever used a react-component in a angular2 app?

Meligy Over a year ago

No. I wouldn't! You probably can, maybe by just enabling tsx option in src/tsconfig.json(although not sure if Webpack will pick that still), but just because you can, doesn't mean you should.

tschaka1904 Over a year ago

Okay. I see! The problem is that I've to bring one dependency in, which is build with react. I could add the bundled version of the react-component to the index.html, but that also doesn't feel right.

Meligy Over a year ago

Importing entire react for a single component is an overkill I believe.

tschaka1904 Over a year ago

Now we can do something called eject, which gives us full access to webpack. This should allow us to add files with different file extensions.

Collectives™ on Stack Overflow

How to add new file extensions to resolve? (Webpack & angular-cli)

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related