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