Monday, 27 August 2018

Angular 5 library - How to generate definition files

I have updated library from Angular 4 to 5 and when I run yarn lib - description files and etc. are not generated in the output folder:

| Angular 5 compiler output | Angular 4 compiler output |
|---------------------------|---------------------------|
| index.js                  | index.js                  |
|                           | index.d.ts                |
|                           | index.js.map              |
|                           | index.metadata.json       |
| ...                       | ...                       |

Thus when I try building my application - I get an error

Here is tsconfig of mylib:

{
  "angularCompilerOptions": {
    "outDir": "lib/",
    "annotateForClosureCompiler": true,
    "strictMetadataEmit": false,
    "skipTemplateCodegen": true,
    "flatModuleOutFile": "index.js",
    "flatModuleId": "amds-tabs"
  },
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es2015", "dom"],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "outDir": "lib/",
    "declaration": true,
    "declarationDir": "lib/"
  },
  "exclude": [
    "node_modules",
    "index.ts",
    "demo",
    "**/*.spec.ts"
  ],
  "files": [
    "src/index.ts"
  ]
}

Here is a webpack config of my lib:

const webpack = require('webpack');
const helpers = require('./helpers');
const path = require('path');
const ngcPlugin = require('ngc-webpack');
const CopyWebpackPlugin = require("copy-webpack-plugin");
const EntriesPlugin = require('webpack-entries');
const autoprefixer = require('autoprefixer');
const AOT = true;
const PurifyPlugin = require('@angular-devkit/build-optimizer').PurifyPlugin;

const ENV = process.env.NODE_ENV = process.env.ENV = 'production';

module.exports = {
  devtool: 'source-map',

  context: helpers.root('src'),

  entry: EntriesPlugin(helpers.root('src/**/!(*.spec).ts'), true),

  resolve: {
    extensions: ['.js', '.ts']
  },

  output: {
    path: helpers.root('lib'),
    publicPath: './[path]',
    filename: '[name].js',
    libraryTarget: 'commonjs2'
  },

  stats: {
    assets: false,
    children: false,
    chunks: false,
    maxModules: 0
  },

  module: {
    rules: [
      {
        test: /\.ts$/,
        enforce: 'pre',
        loader: 'tslint-loader',
        options: {
          formatter: 'stylish',
          emitErrors: true,
          failOnHint: false,
          typeCheck: false
        }
      },
      {
        test: /\.ts$/,
        loaders: ['@angular-devkit/build-optimizer/webpack-loader',  '@ngtools/webpack'],
        exclude: helpers.root('index.ts')
      },
      {
        test: /\.html$/,
        loaders: 'raw-loader'
      },
      {
        test: /\.json$/,
        loader: 'json-loader'
      },
      {
        test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
        loader: 'file-loader?name=assets/[name].[ext]'
      },
      {
        test: /\.(scss|css)$/,
        loaders: [
          "raw-loader",
          "postcss-loader",
          "sass-loader"
        ]
      }
    ]
  },

  externals: (context, request, callback) => {
    // modules that are not absolute path or relative path are externals
    // 'src/index.ts' is the only module referenced by absolute path

    const isItemExcludable = !path.isAbsolute(request) && /^[@a-zA-Z0-9\-]/.test(request);
    if (isItemExcludable) {
      return callback(null, request);
    }

    callback();
  },

  plugins: [
    new ngcPlugin.NgcWebpackPlugin({
      AOT,
      tsConfigPath: './tsconfig.lib.json'
    }),
    new PurifyPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    new CopyWebpackPlugin([
      {
        from: helpers.root('src/**/*.scss'),
        to: helpers.root('lib/[path]/[name].[ext]')
      },
      {
        from: helpers.root('src/**/*component.html'),
        to: helpers.root('lib/[path]/[name].[ext]')
      }
    ]),
    new webpack.optimize.UglifyJsPlugin({
      mangle: {
        keep_fnames: true
      },
      compress: {
        warnings: false
      }
    }),
    new webpack.DefinePlugin({
      'process.env': {
        'ENV': JSON.stringify(ENV)
      }
    }),
    new webpack.LoaderOptionsPlugin({
      options: {
        context: helpers.root('src'),
        sassLoader: {
          includePaths: [helpers.root('src', 'scss')]
        },
        postcss: [autoprefixer({browsers: ['last 1 version']})],
      }
    })
  ]
};



from Angular 5 library - How to generate definition files

No comments:

Post a Comment