Angular-cli: Plugin system for webpack

[splincode]

Hello, there are not enough extensions to develop on the webpack. Our team developed a utility for redefining plug-ins (working with .angular-cli.json) and a convenient addition for Angular:

https://github.com/Angular-RU/angular-cli-webpack

What do you think if angular-cli out of the box had the opportunity and could you give us this?

package.json

"start": "ng serve --webpack-config ngw.config.ts" # it works with .angular-cli.json

terminal

$ npm start

ngw.config.ts

import * as webpack from 'webpack';
import { WebpackConfigOptions as ConfigOptions } from '@angular/cli/models/webpack-config';
import { BuildOptions } from '@angular/cli/models/build-options';

export type Configuration = webpack.Configuration;
const DEFAULT_COMMAND = process.argv[2];

export default function (config: Configuration, options: ConfigOptions<BuildOptions>, argv) {
    const command = argv || DEFAULT_COMMAND;

    //common config modification
    ...

    switch(options.buildOptions.enviroment) {
      case 'prod':
       config = productionModificationsMerge(config);
      break;
     case 'dev':
      //etc
    }

    return config;
}

Bug Report or Feature Request (mark with an x)

- [ ] bug report -> please search issues before submitting
- [x] feature request

[infogulch]

Related to +comp: cli/eject ?

A simple built-in way to add webpack plugins would probably cover the majority of use-cases for ejecting in the first place. (Not to say that the ability to eject is unimportant. re: NG6) Personally I'd like to keep using ng-cli with just a handful of additional plugins.

[clydin]

Out of curiosity, what features are currently missing that would required the hypothetical handful of plugins. If they are commonly used features than they could be potentially implemented directly.

[infogulch]

Yeah this is a bit abstract, lets make it a bit more concrete. I can't speak for anyone but me and my team, but we'd like to add a couple webpack loaders. Specifically, graphql-tag/loader is the most pressing one for us. It will allow us to more easily maintain our query source and rely less on code generation. Being able to add additional webpack loaders would be what we would use as "plugins", and a quick overview of webpack-related issues makes me think that this is the case for many people.

[Haykaran]

I think the ability to add custom webpack plugins would be really useful. @clydin example of the plugin, we use that is not commonly used would be webpack-sfdc-deploy-plugin which pushes compiled result to Salesforce. For now, I have to eject every app. Also, updating to new angular-cli version means re-ejecting to make sure webpack config is up to date with latest angular-cli.

[stefan-schweiger]

@clydin I truly miss the ability to use nameof since switching from a fully webpack based project to angular-cli https://github.com/dsherret/ts-nameof/issues/23#issuecomment-330523782

I never liked using ng eject, but it's currently disabled in the new cli so there isn't even that option anymore.

[clydin]

@stefan-schweiger A nameof helper for TS that provides compile-time checking and IDE support:

function nameof<T>(name: keyof T): string {
  return name;
}

[JonnyBGod]

I also have the need to use graphql-tag/loader

[sevaru]

I would like to use tcoopman/image-webpack-loader to properly optimize images with angular-cli.

[splincode]

@sevaru you can usage

https://github.com/Angular-RU/angular-cli-webpack

[loftyduck]

This sounds like https://github.com/angular/angular-cli/issues/1656

[angular-automatic-lock-bot[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._}