build: add package name to AMD modules (#10177)

* Fixes that the UMD bundles, which use the `define` function in AMD mode, don't have a module name. This feature has been added in later versions of Rollup, so we had to upgrade. By comparing with the previous UMD bundles, the bundles still seem to work properly (also in our demo-app).

Fixes #10142

Author: devversion

package.json

@@ -111,9 +111,9 @@
     "protractor": "^5.2.0",
     "request": "^2.83.0",
     "resolve-bin": "^0.4.0",
-    "rollup": "^0.41.6",
-    "rollup-plugin-alias": "^1.3.1",
-    "rollup-plugin-node-resolve": "^3.0.0",
+    "rollup": "^0.56.3",
+    "rollup-plugin-alias": "^1.4.0",
+    "rollup-plugin-node-resolve": "^3.0.3",
     "run-sequence": "^1.2.2",
     "scss-bundle": "^2.0.1-beta.7",
     "selenium-webdriver": "^3.6.0",

tools/package-tools/build-bundles.ts

@@ -35,6 +35,7 @@ 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}`,
       esm2015Dest: join(bundlesDir, `${packageName}.js`),
       esm5Dest: join(bundlesDir, `${packageName}.es5.js`),
@@ -48,11 +49,13 @@ export class PackageBundler {
     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);
 
     return this.bundleEntryPoint({
       entryFile,
       esm5EntryFile,
-      moduleName: `ng.${packageName}.${dashCaseToCamelCase(entryPoint)}`,
+      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`),
@@ -68,6 +71,7 @@ export class PackageBundler {
   private async bundleEntryPoint(config: BundlesConfig) {
     // Build FESM-2015 bundle file.
     await this.createRollupBundle({
+      importName: config.importName,
       moduleName: config.moduleName,
       entry: config.entryFile,
       dest: config.esm2015Dest,
@@ -76,6 +80,7 @@ export class PackageBundler {
 
     // Build FESM-5 bundle file.
     await this.createRollupBundle({
+      importName: config.importName,
       moduleName: config.moduleName,
       entry: config.esm5EntryFile,
       dest: config.esm5Dest,
@@ -84,6 +89,7 @@ export class PackageBundler {
 
     // Create UMD bundle of ES5 output.
     await this.createRollupBundle({
+      importName: config.importName,
       moduleName: config.moduleName,
       entry: config.esm5Dest,
       dest: config.umdDest,
@@ -105,7 +111,7 @@ export class PackageBundler {
     const bundleOptions = {
       context: 'this',
       external: Object.keys(rollupGlobals),
-      entry: config.entry,
+      input: config.entry,
       onwarn: (message: string) => {
         // TODO(jelbourn): figure out *why* rollup warns about certain symbols not being found
         // when those symbols don't appear to be in the input file in the first place.
@@ -121,14 +127,13 @@ export class PackageBundler {
     };
 
     const writeOptions = {
-      // Keep the moduleId empty because we don't want to force developers to a specific moduleId.
-      moduleId: '',
-      moduleName: config.moduleName || 'ng.material',
+      name: config.moduleName || 'ng.material',
+      amd: {id: config.importName},
       banner: buildConfig.licenseBanner,
       format: config.format,
-      dest: config.dest,
+      file: config.dest,
       globals: rollupGlobals,
-      sourceMap: true
+      sourcemap: true
     };
 
     // For UMD bundles, we need to adjust the `external` bundle option in order to include
@@ -183,6 +188,7 @@ export class PackageBundler {
 interface BundlesConfig {
   entryFile: string;
   esm5EntryFile: string;
+  importName: string;
   moduleName: string;
   esm2015Dest: string;
   esm5Dest: string;
@@ -196,4 +202,5 @@ interface RollupBundleConfig {
   dest: string;
   format: string;
   moduleName: string;
+  importName: string;
 }