Code Monkey home page Code Monkey logo

ng-annotate-webpack-plugin's Introduction

ng-annotate-webpack-plugin

ng-annotate is deprecated. Consider using https://github.com/schmod/babel-plugin-angularjs-annotate instead.


WebPack plugin that runs ng-annotate on your bundles

Based on ngmin-webpack-plugin

Usage

In webpack.config.js:

var webpack = require('webpack');
var ngAnnotatePlugin = require('ng-annotate-webpack-plugin');

module.exports = {
    /// ... rest of config
    plugins: [
        new ngAnnotatePlugin()
    ]
}

To modify the default plugin options or to add options for ng-annotate:

var webpack = require('webpack');
var ngAnnotatePlugin = require('ng-annotate-webpack-plugin');

module.exports = {
    /// ... rest of config
    plugins: [
        new ngAnnotatePlugin({
            add: true,
            // other ng-annotate options here
        })
    ]
}

Since version 0.4.0: for performance reasons, chunks where the name starts with vendors~ are not annotated. To customize this behavior, set the option annotateChunk to a method that returns true if a chunk should be annotated:

var webpack = require('webpack');
var ngAnnotatePlugin = require('ng-annotate-webpack-plugin');

module.exports = {
    /// ... rest of config
    plugins: [
        new ngAnnotatePlugin({
            add: true,
            annotateChunk: (chunk) => !chunk.name || !chunk.name.startsWith("vendors~"),
            // other ng-annotate options here
        })
    ]
}

If you are looking for a loader instead of a plugin, use ng-annotate-loader instead

ng-annotate-webpack-plugin's People

Contributors

cliechty avatar dremora avatar jeffling avatar leftstick avatar ondrasak avatar pgiraud avatar rhuitl avatar yuristrelets avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

ng-annotate-webpack-plugin's Issues

Doesn't annotate 'required' controllers

Hello,

If you have your controller in separate file like bellow:

// controller.js
module.exports = function(Foo, Bar, Baz) {
  // Hello world.
}

And want to inject it somewhere else in a code:

angular.module('example').controller("exampleCtrl", require('./controller.js')); 

It won't be annotated.

Explicit notation not working /* @ngInject */

I can't get the @ngInject notation to work in any of my bundled files. When I run ng-annotate on the file manually, it seems to work fine. Any reason this wouldn't be working?

I've tried a few different ways:

/* @ngInject */
function myFunc() {}

var myFunc = /* @ngInject */ function() {};

Performance

Hi!, In a project that I'm working, I have an issue that every time I did a change in my code or just start the app for the first time, it takes at least 2 min to start o re-render. At first, I didn't know what library was causing this, so I started to check into my commits and realized about this one, I removed it from my package.json and started to be so much faster, now it takes less than a second to re render and less than a minute to start at first, those anyone now why this library is causing this?, or if it is another thing?

Crash with source maps enabled

Hi! just noticed that it throws an error with sourcemaps enabled. The same thing with ngmin-webpack-plugin module.

Here is an example with empty file:

without source maps:

D:\Workspace\Proj>webpack src/app/index.js yo.js
Hash: a3d665d35348728f5d3c
Version: webpack 1.4.0-beta8
Time: 70ms
Asset  Size  Chunks             Chunk Names
yo.js  1517       0  [emitted]  main
   [0] ./src/app/index.js 0 {0} [built]

And with source maps enabled:

D:\Workspace\Proj>webpack  --devtool sourcemap src/app/index.js yo.js

C:\Users\colou_000\AppData\Roaming\npm\node_modules\webpack\node_modules\webpack-core\node_modules\source-map\lib\source-map\source-node.js:177
      throw new TypeError(
            ^
TypeError: Expected a SourceNode, string, or an array of SourceNodes and strings. Got /******/
(function (modules) {
  // webpackBootstrap
  /******/
  // The module cache
  /******/
  var installedModules = {};
  /******/
  /******/
  // The require function
  /******/
  function __webpack_require__(moduleId) {
    /******/
    /******/
    // Check if module is in cache
    /******/
    if (installedModules[moduleId])
      /******/
      return installedModules[moduleId].exports;
    /******/
    /******/
    // Create a new module (and put it into the cache)
    /******/
    var module = installedModules[moduleId] = {
        exports: {},
        id: moduleId,
        loaded: false
      };
    /******/
    /******/
    // Execute the module function
    /******/
    modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
    /******/
    /******/
    // Flag the module as loaded
    /******/
    module.loaded = true;
    /******/
    /******/
    // Return the exports of the module
    /******/
    return module.exports;  /******/
  }
  /******/
  /******/
  /******/
  // expose the modules object (__webpack_modules__)
  /******/
  __webpack_require__.m = modules;
  /******/
  /******/
  // expose the module cache
  /******/
  __webpack_require__.c = installedModules;
  /******/
  /******/
  // __webpack_public_path__
  /******/
  __webpack_require__.p = '';
  /******/
  /******/
  // Load entry module and return exports
  /******/
  return __webpack_require__(0);  /******/
}([function (module, exports, __webpack_require__) {
  }  /******/]));
    at SourceNode_add [as add] (C:\Users\colou_000\AppData\Roaming\npm\node_modules\webpack\node_modules\webpack-core\node_modules\source-map\lib\source-map\source-node.js:177:13)
    at Source.ConcatSource.add (C:\Users\colou_000\AppData\Roaming\npm\node_modules\webpack\node_modules\webpack-core\lib\ConcatSource.js:22:14)
    at Source.<anonymous> (C:\Users\colou_000\AppData\Roaming\npm\node_modules\webpack\node_modules\webpack-core\lib\ConcatSource.js:12:8)
    at Array.forEach (native)
    at Source.ConcatSource (C:\Users\colou_000\AppData\Roaming\npm\node_modules\webpack\node_modules\webpack-core\lib\ConcatSource.js:11:40)
    at Tapable.<anonymous> (C:\Users\colou_000\AppData\Roaming\npm\node_modules\webpack\lib\SourceMapDevToolPlugin.js:122:65)
    at Array.forEach (native)
    at Tapable.<anonymous> (C:\Users\colou_000\AppData\Roaming\npm\node_modules\webpack\lib\SourceMapDevToolPlugin.js:87:10)
    at Tapable.applyPlugins (C:\Users\colou_000\AppData\Roaming\npm\node_modules\webpack\node_modules\tapable\lib\Tapable.js:26:37)
    at Tapable.<anonymous> (C:\Users\colou_000\AppData\Roaming\npm\node_modules\webpack\lib\Compilation.js:523:10)

Using without Uglify plugin gives error on source maps

The error is like

Expected a SourceNode, string, or an array of SourceNodes and strings. Got webpackJsonp([0],[
/* 0 */
/***/ function(module, exports, __webpack_require__) {

    "use strict";

    var profileApp = angular.module("profileApp", ["ui.router"]);

    profileApp.config(["$stateProvider", function ($stateProvider) {
      $stateProvider.state("index", {
        url: "",
        views: {
          viewA: { template: "index.viewA" },
          viewB: { template: "index.viewB" }
        }
      }).state("route1", {
        url: "/route1",
        views: {
          viewA: { template: "route1.viewA" },
          viewB: { template: "route1.viewB" }
        }
      }).state("route2", {
        url: "/route2",
        views: {
          viewA: { template: "route2.viewA" },
          viewB: { template: "route2.viewB" }
        }
      });
    }]);

    /*
    profileApp.controller('ProfileSettingsCtrl', function ($scope) {
      $scope.phones = [
        {'name': 'Nexus S',
          'snippet': 'Fast just got faster with Nexus S.'},
        {'name': 'Motorola XOOM™ with Wi-Fi',
          'snippet': 'The Next, Next Generation tablet.'},
        {'name': 'MOTOROLA XOOM™',
          'snippet': 'The Next, Next Generation tablet.'}
      ];
    });*/

/***/ }
]); TypeError: Expected a SourceNode, string, or an array of SourceNodes and strings. Got webpackJsonp([0],[
/* 0 */
/***/ function(module, exports, __webpack_require__) {
...
]);
    at SourceNode_add [as add] (/js/javascript-nodejs/node_modules/webpack/node_modules/webpack-core/node_modules/source-map/lib/source-map/source-node.js:177:13)
    at Source.ConcatSource.add (/js/javascript-nodejs/node_modules/webpack/node_modules/webpack-core/lib/ConcatSource.js:22:14)
    at Source.<anonymous> (/js/javascript-nodejs/node_modules/webpack/node_modules/webpack-core/lib/ConcatSource.js:12:8)
    at Array.forEach (native)
    at Source.ConcatSource (/js/javascript-nodejs/node_modules/webpack/node_modules/webpack-core/lib/ConcatSource.js:11:40)
    at Tapable.<anonymous> (/js/javascript-nodejs/node_modules/webpack/lib/SourceMapDevToolPlugin.js:129:64)
    at Array.forEach (native)
    at Tapable.<anonymous> (/js/javascript-nodejs/node_modules/webpack/lib/SourceMapDevToolPlugin.js:89:10)
    at Tapable.applyPlugins (/js/javascript-nodejs/node_modules/webpack/node_modules/tapable/lib/Tapable.js:26:37)
    at Tapable.<anonymous> (/js/javascript-nodejs/node_modules/webpack/lib/Compilation.js:523:10)

The config has

...
 devtool: "inline-source-map",
...
new ngAnnotatePlugin({ 
      add: true
    }),

webpack4 support?

Will you release the webpack4 support? I am waiting for it, thanks

Version 0.3.0

Thanks for this plugin, I'm using it in an angularjs webapp that we are migrating to webpack in our intent to modernise it.

While having a look, I've spotted that in the git tag and in the package.json you have different version numbers. Can you publish the latest version please?

Doesn't work with eval-cheap-source-map

The plugin worked fine when in my webpack conf I had:

devtool: 'source-map'

When I changed it to:

devtool: 'eval-cheap-source-map'

it stopped working and I got the strict DI violation error.

It's unlikely it's a problem with ng-annotate, because when I switched to ng-annotate-loader (while keeping ng-annotate unchanged), the issue was resolved.

Happy to provide other info if needed.

ng-annotate-webpack-plugin: Error: StringMap expected string key

My Webpack Config file having below code:

const ngAnnotatePlugin = require('ng-annotate-webpack-plugin');

plugins: [
.......
new ngAnnotatePlugin({
                add: true,
            }),
.....]

ERROR: throw new Error("StringMap expected string key");
Error: StringMap expected string key at stringmap.set

When we remove ng-annotate-webpack-plugin we are not getting above error.

Sourcemap a couple of lines off

I am experiencing that the generated sourcemap by Webpack is a few lines off compared to the source. As soon as I disable your plugin, the lines are aligned again. Could it be related to issue #9? I am combining your plugin with TypeScript compilation.

Fails to inject in directives

In my current setup it fails to do the injection inside directives. Anyone else running into the same issue?

app.directive('someDirective', someDirective);

function someDirective() {
    var directive = {
        ...
         // I have to inject `$scope` manually in order for my to get it to work 
        controller: ['$scope', someDirectiveController], 
    };

    return directive;

    function someDirectiveController($scope) {

   }
}

BTW

this is my simple setting for the plugin

new ngAnnotatePlugin({ add: true })

Compilation issue

Added to webpack config as per example.
Getting error:

TypeError: Cannot read property 'compilation' of undefined
    at ngAnnotatePlugin.apply (~/Projects/one/node_modules/ng-annotate-webpack-plugin/index.js:12:20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.