Skip to content

build: fix incorrect amd module names #14786

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 38 additions & 15 deletions tools/package-tools/build-bundles.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,13 @@ const bundlesDir = join(buildConfig.outputDir, 'bundles');

/** Utility for creating bundles from raw ngc output. */
export class PackageBundler {
constructor(private buildPackage: BuildPackage) {}

/** Name of the AMD module for the primary entry point of the build package. */
private readonly primaryAmdModuleName: string;

constructor(private buildPackage: BuildPackage) {
this.primaryAmdModuleName = this.getAmdModuleName(buildPackage.name);
}

/** Creates all bundles for the package and all associated entry points (UMD, ES5, ES2015). */
async createBundles() {
Expand All @@ -35,8 +41,8 @@ export class PackageBundler {
return this.bundleEntryPoint({
entryFile: this.buildPackage.entryFilePath,
esm5EntryFile: join(this.buildPackage.esm5OutputDir, 'index.js'),
importName: `@angular/${this.buildPackage.name}`,
moduleName: `ng.${this.buildPackage.name}`,
importName: `@angular/${packageName}`,
moduleName: this.primaryAmdModuleName,
esm2015Dest: join(bundlesDir, `${packageName}.js`),
esm5Dest: join(bundlesDir, `${packageName}.es5.js`),
umdDest: join(bundlesDir, `${packageName}.umd.js`),
Expand All @@ -45,21 +51,20 @@ export class PackageBundler {
}

/** Bundles a single secondary entry-point w/ given entry file, e.g. @angular/cdk/a11y */
private async bundleSecondaryEntryPoint(entryPoint: string) {
private async bundleSecondaryEntryPoint(entryPointName: string) {
const packageName = this.buildPackage.name;
const entryFile = join(this.buildPackage.outputDir, entryPoint, 'index.js');
const esm5EntryFile = join(this.buildPackage.esm5OutputDir, entryPoint, 'index.js');
const dashedEntryName = dashCaseToCamelCase(entryPoint);
const entryFile = join(this.buildPackage.outputDir, entryPointName, 'index.js');
const esm5EntryFile = join(this.buildPackage.esm5OutputDir, entryPointName, 'index.js');

return this.bundleEntryPoint({
entryFile,
esm5EntryFile,
importName: `@angular/${this.buildPackage.name}/${dashedEntryName}`,
moduleName: `ng.${packageName}.${dashedEntryName}`,
esm2015Dest: join(bundlesDir, `${packageName}`, `${entryPoint}.js`),
esm5Dest: join(bundlesDir, `${packageName}`, `${entryPoint}.es5.js`),
umdDest: join(bundlesDir, `${packageName}-${entryPoint}.umd.js`),
umdMinDest: join(bundlesDir, `${packageName}-${entryPoint}.umd.min.js`),
importName: `@angular/${packageName}/${entryPointName}`,
moduleName: this.getAmdModuleName(packageName, entryPointName),
esm2015Dest: join(bundlesDir, `${packageName}`, `${entryPointName}.js`),
esm5Dest: join(bundlesDir, `${packageName}`, `${entryPointName}.es5.js`),
umdDest: join(bundlesDir, `${packageName}-${entryPointName}.umd.js`),
umdMinDest: join(bundlesDir, `${packageName}-${entryPointName}.umd.min.js`),
});
}

Expand Down Expand Up @@ -154,7 +159,7 @@ export class PackageBundler {
// secondary entry-points from the rollup globals because we want the UMD for the
// primary entry-point to include *all* of the sources for those entry-points.
if (this.buildPackage.exportsSecondaryEntryPointsAtRoot &&
config.moduleName === `ng.${this.buildPackage.name}`) {
config.moduleName === this.primaryAmdModuleName) {

const importRegex = new RegExp(`@angular/${this.buildPackage.name}/.+`);
external = external.filter(e => !importRegex.test(e));
Expand Down Expand Up @@ -185,8 +190,26 @@ export class PackageBundler {
return map;
}, {} as {[key: string]: string});
}
}

/**
* Gets the AMD module name for a package and an optional entry point. This is consistent
* to the module name format being used in "angular/angular".
*/
private getAmdModuleName(packageName: string, entryPointName?: string) {
// For example, the AMD module name for the "@angular/material-examples" package should be
// "ng.materialExamples". We camel-case the package name in case it contains dashes.
let amdModuleName = `ng.${dashCaseToCamelCase(packageName)}`;

if (entryPointName) {
// For example, the "@angular/material/bottom-sheet" entry-point should be converted into
// the following AMD module name: "ng.material.bottomSheet". Similar to the package name,
// the entry-point name needs to be camel-cased in case it contains dashes.
amdModuleName += `.${dashCaseToCamelCase(entryPointName)}`;
}

return amdModuleName;
}
}

/** Configuration for creating library bundles. */
interface BundlesConfig {
Expand Down