I'm facing a problem trying to create a directive npm package.
I had already created packages for @Component but this is the first I create for @Directive.
The problem I'm facing is that when I run ng serve the build completes ok but when I load the page I get the Error: Can't resolve all parameters for HighlightDirective.
The curious thing is that if a run ng serve --aot the problem does not appear.
So, the package works only with --AOT and throw error with JIT.
May be that --AOT is including some needed package before parsing my custom directive. It does not happen in JIT that try to load the directive before another module loads the needed package.
I made a plunker to show the problem and I'm leaving the package URL so you can see my code.
textarea-resize.directive.ts
import { Directive, ElementRef, Input } from '@angular/core';
@Directive({ selector: 'textarea[textarea-resize]' })
export class HighlightDirective {
constructor(el: ElementRef) {
el.nativeElement.style.backgroundColor = 'yellow';
}
}
Ps. The directive name is now HighlightDirective even being the file name textarea-resize.directive because I've replaced my directive with one from angular.io docs to be sure the directive sintax is correct.
I've also tested loading the directive directly from my app instead from node_module and this way everything works fine in both AOT and JIT.
Thanks to all for any help.
UMD: https://unpkg.com/@neoprospecta/angular-textarea-resize@0.0.5/dist/bundles/angular-textarea-resize.umd.js
Plunker: https://plnkr.co/edit/omWp7OfFvaoTQgG0Xs48?p=preview
Package: https://www.npmjs.com/package/@neoprospecta/angular-textarea-resize
This is the task I use to build:
#!/usr/bin/env node
'use strict';
const fs = require('fs');
const path = require('path');
const glob = require('glob');
/**
* Simple Promiseify function that takes a Node API and return a version that supports promises.
* We use promises instead of synchronized functions to make the process less I/O bound and
* faster. It also simplify the code.
*/
function promiseify(fn) {
return function() {
const args = [].slice.call(arguments, 0);
return new Promise((resolve, reject) => {
fn.apply(this, args.concat([function (err, value) {
if (err) {
reject(err);
} else {
resolve(value);
}
}]));
});
};
}
const readFile = promiseify(fs.readFile);
const writeFile = promiseify(fs.writeFile);
const outputDir = './inline-src';
function rmDir(dirPath) {
try { var files = fs.readdirSync(dirPath); }
catch(e) { return; }
if (files.length > 0)
for (var i = 0; i < files.length; i++) {
var filePath = dirPath + '/' + files[i];
if (fs.statSync(filePath).isFile())
fs.unlinkSync(filePath);
else
rmDir(filePath);
}
fs.rmdirSync(dirPath);
};
function inlineResources(globs) {
if (typeof globs == 'string') {
globs = [globs];
}
/**
* For every argument, inline the templates and styles under it and write the new file.
*/
return Promise.all(globs.map(pattern => {
if (pattern.indexOf('*') < 0) {
// Argument is a directory target, add glob patterns to include every files.
pattern = path.join(pattern, '**', '*');
}
const files = glob.sync(pattern, {})
.filter(name => /\.ts$/.test(name)); // Matches only JavaScript files.
rmDir(outputDir+'');
fs.mkdir(outputDir);
// Generate all files content with inlined templates.
return Promise.all(files.map(filePath => {
return readFile(filePath, 'utf-8')
.then(content => inlineResourcesFromString(content, url => {
return path.join(path.dirname(filePath), url);
}))
.then(content => {
var inlinePath = outputDir + '/' + filePath.replace(/^.*[\\\/]/, '')
writeFile(inlinePath, content);
})
.catch(err => {
console.error('An error occurred: ', err);
});
}));
}));
}
/**
* Inline resources from a string content.
* @param content {string} The source file's content.
* @param urlResolver {Function} A resolver that takes a URL and return a path.
* @returns {string} The content with resources inlined.
*/
function inlineResourcesFromString(content, urlResolver) {
// Curry through the inlining functions.
return [
inlineTemplate,
inlineStyle,
removeModuleId
].reduce((content, fn) => fn(content, urlResolver), content);
}
if (require.main === module) {
inlineResources(process.argv.slice(2));
}
/**
* Inline the templates for a source file. Simply search for instances of `templateUrl: ...` and
* replace with `template: ...` (with the content of the file included).
* @param content {string} The source file's content.
* @param urlResolver {Function} A resolver that takes a URL and return a path.
* @return {string} The content with all templates inlined.
*/
function inlineTemplate(content, urlResolver) {
return content.replace(/templateUrl:\s*'([^']+?\.html)'/g, function(m, templateUrl) {
const templateFile = urlResolver(templateUrl);
const templateContent = fs.readFileSync(templateFile, 'utf-8');
const shortenedTemplate = templateContent
.replace(/([\n\r]\s*)+/gm, ' ')
.replace(/"/g, '\\"');
return `template: "${shortenedTemplate}"`;
});
}
/**
* Inline the styles for a source file. Simply search for instances of `styleUrls: [...]` and
* replace with `styles: [...]` (with the content of the file included).
* @param urlResolver {Function} A resolver that takes a URL and return a path.
* @param content {string} The source file's content.
* @return {string} The content with all styles inlined.
*/
function inlineStyle(content, urlResolver) {
return content.replace(/styleUrls:\s*(\[[\s\S]*?\])/gm, function(m, styleUrls) {
const urls = eval(styleUrls);
return 'styles: ['
+ urls.map(styleUrl => {
const styleFile = urlResolver(styleUrl);
const styleContent = fs.readFileSync(styleFile, 'utf-8');
const shortenedStyle = styleContent
.replace(/([\n\r]\s*)+/gm, ' ')
.replace(/"/g, '\\"');
return `"${shortenedStyle}"`;
})
.join(',\n')
+ ']';
});
}
/**
* Remove every mention of `moduleId: module.id`.
* @param content {string} The source file's content.
* @returns {string} The content with all moduleId: mentions removed.
*/
function removeModuleId(content) {
return content.replace(/\s*moduleId:\s*module\.id\s*,?\s*/gm, '');
}
module.exports = inlineResources;
module.exports.inlineResourcesFromString = inlineResourcesFromString;
