我一直在尝试几种方法，但我无法理解如何为我的项目生成定义文件。我有两个 angular-cli 生成的应用程序 A 和 B，我希望 A 将 B 作为一个包使用（带有 npm 链接）。据我了解，我需要在项目 B 中创建一个 index.ts 文件，其中包含我要导出的所有模块并运行“ng build”命令。我已经看到只创建捆绑包而不创建定义文件，我怎样才能生成定义文件？这是正确的方法吗？
我尝试了其他一些选项，例如“rollup”和“ngmakelib”，但完成这个简单的任务似乎非常困难。我们是否有一种简单的方法可以将 Angular 5 项目生成为库并从其他项目中使用这些库？
在高层次上，以下是创建可重用 Angular 模块所需执行的步骤（全部在没有 webpack 的情况下完成）：
public_api.ts在您的文件夹中创建一个文件src。这应该包含所有导出的符号，以便库的用户可以执行以下操作：import { symbol } from 'your-library'
将您的src文件夹复制到一个build/dist文件夹，确保内联您的模板。我为此使用gulp和。gulp-inline-ng2-template
gulpfile.js
const gulp = require('gulp');
const replace = require('gulp-replace');
const inlineNg2Template = require('gulp-inline-ng2-template');
const del = require('del');
gulp.task('clean', function () {
return del([
"dist/**"
], { force: true });
});
gulp.task('copy-public-api', ['clean'], function () {
return gulp.src([
'../src/public_api.ts'
])
.pipe(replace('./app', './src'))
.pipe(gulp.dest('dist'))
});
gulp.task('copy-src', ['copy-public-api'], function () {
return gulp.src([
'../src/app/**/*.ts',
'!../src/app/**/*.spec.ts'
])
.pipe(inlineNg2Template({ base: '../src', useRelativePaths: true }))
.pipe(gulp.dest('dist/src'))
});
public_api.ts
export * from './app/app.module';
// ... other exports ...
ngc. 您将使用它ngc来生成必要的元数据文件。这是我使用的设置。该文件放置在“build”文件夹中（注意 和 的相对路径typeRoots）paths。构建/tsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"rootDir": ".",
"outDir": "",
"paths": {
"*": [
"../node_modules/*"
]
},
"declaration": true,
"stripInternal": true,
"noImplicitAny": true,
"strictNullChecks": true,
"noFallthroughCasesInSwitch": true,
"moduleResolution": "node",
"module": "es2015",
"target": "es5",
"lib": [
"es2015",
"dom"
],
"skipLibCheck": true,
"typeRoots": [
"../node_modules/@types/"
],
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"sourceMap": true,
"inlineSources": true
},
"files": [
"dist/public_api.ts"
],
"angularCompilerOptions": {
"annotateForClosureCompiler": true,
"strictMetadataEmit": false,
"skipTemplateCodegen": true,
"flatModuleOutFile": "index.js",
"flatModuleId": "ng-module-template"
}
}
angularCompilerOptions确保创建一个元数据文件 (index.js) 。
用于ngc从 build 文件夹编译模块。确保安装@angular/compiler和@angular/compiler-cli：
../node_modules/.bin/ngc -p tsconfig.json
仅部署所需的文件。我从部署build\dist到dist：
gulp.task('build', [], function (done) {
gulp.src([
'dist/index.js',
'dist/public_api.js',
'dist/index.metadata.json',
'dist/**/*.d.ts',
'!../src/app/**/*.spec.ts'
], { base: 'dist' })
.pipe(gulp.dest('../dist'))
.on('end', function () {
del('dist/**', { force: true }).then(function () {
done();
});
});
});
确保修改 package.json 以指向 index.js：
{
"name": "ng-module-template",
"version": "1.0.0",
"description": "",
"main": "dist/index.js",
"typings": "dist/index.d.ts",
}
这是一个 gulp 构建目标，用于使用 rollup 和 treeshaking 编译和创建包：
gulp.task('compile', ['copy-src'], function (done) {
gulp.src('tsconfig.json')
.pipe(shell(['"../node_modules/.bin/ngc" -p <%= file.path %>']))
.on('end', function () {
del('node_modules/**', { force: true }).then(function () {
done();
});
});
});
gulp.task('bundle', ['compile'], function (done) {
var external = [
'@angular/core',
'@angular/common',
'@angular/compiler',
'@angular/core',
'@angular/http',
'@angular/platform-browser',
'@angular/platform-browser-dynamic',
'@angular/router',
'@angular/router-deprecated'
];
var globals = {
'@angular/core': 'vendor._angular_core',
'@angular/http': 'vendor._angular_http',
'@angular/platform-browser': 'vendor._angular_platformBrowser',
'@angular/platform-browser-dynamic': 'vendor._angular_platformBrowserDynamic',
'@angular/router-deprecated': 'vendor._angular_routerDeprecated'
};
rollup.rollup({
input: 'dist/index.js',
onwarn: function (warning) {
if (warning.message.indexOf("treating it as an external dependency") > -1)
return;
console.warn(warning.message);
}
}).then(function (bundle) {
var umd = bundle.write({
file: `dist/bundles/${pkg.name}.umd.js`,
format: 'umd',
exports: 'named',
name: pkg.name,
sourcemap: true,
external: external,
globals: globals
});
var cjs = bundle.write({
file: `dist/bundles/${pkg.name}.cjs.js`,
format: 'cjs',
exports: 'named',
name: pkg.name,
sourcemap: true,
external: external,
globals: globals
});
var amd = bundle.write({
file: `dist/bundles/${pkg.name}.amd.js`,
format: 'amd',
exports: 'named',
name: pkg.name,
sourcemap: true,
external: external,
globals: globals
});
var es = bundle.write({
file: `dist/index.es5.js`,
format: 'es',
exports: 'named',
name: pkg.name,
sourcemap: true,
external: external,
globals: globals
});
return Promise.all([umd, cjs, amd, es]).then(function () {
done();
});
});
});
先决条件
Angular5+
Git（如果要发布到本地文件夹，则安装在本地）
https://github.com/angular-patterns/ng-module-template
npm 运行开发
用于发展
npm 运行构建
用于生产应用程序构建（输出到 dist 文件夹）
npm 运行构建模块
对于模块构建（输出到 dist 文件夹）
npm 运行发布
用于发布以c:\packages使用 git。或者，运行npm publish以发布到npm.
npm run name-module -- --(module-name)
用于命名模块。这会修改源。
npm install c:\packages\<module-name>