以我的经验，angular2-template-loader 不会深入研究 node_modules，因此 node_modules 中可能依赖它的库将不走运。
我解决它的方法是将外部模板和 css 文件作为库构建步骤的一部分进行内联，并且我很大程度上基于 angular material 2 如何发布他们的库。然后 webpack - 在消费应用程序级别 - 不需要担心您的模板或样式表，因为它们已经准备好。
为了不使用链接，这是他们的脚本，我不相信它：
#!/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);
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 => /\.js$/.test(name)); // Matches only JavaScript files.
// 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 => writeFile(filePath, 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;
他们将其用作 gulp 任务的一部分，我将我的重新设计为简单的节点脚本。
我在构建中所做的是：
- 从我的 src 文件夹创建一个 dist 文件夹（因此 html 和 css 文件保持相对），然后从 dist 中创建：
- 如果需要，在此处进行任何类型的 postcss 处理（使用 postcss 最好的选择是使用替换标志来维护文件夹结构）
- 运行内联（上面的脚本）
- 删除 html 和 css 文件（不再需要它们）
- 用 ngc 编译
在第一步中，我首先使用 staging 文件夹，然后转译到 dist 文件夹，但 ngc 并没有与 outDir 一起玩。
花了一些时间才弄清楚这一点，所以希望我可以为您节省一些时间。
