feat: add support for watch when building a library

docs/documentation/stories/create-library.md

@@ -78,29 +78,24 @@ directory for the library beforehand, removing old code leftover code from previ
 ## Why do I need to build the library everytime I make changes?
 
 Running `ng build my-lib` every time you change a file is bothersome and takes time.
+In `Angular CLI` version `6.2` an incremental builds functionality has been added to improve the experience of library developers. 
+Everytime a file is changed a partial build is performed that emits the amended files.
 
-Some similar setups instead add the path to the source code directly inside tsconfig.
-This makes seeing changes in your app faster.
+The feature can be using by passing `--watch` command argument as show below;
 
-But doing that is risky.
-When you do that, the build system for your app is building the library as well.
-But your library is built using a different build system than your app.
-
-Those two build systems can build things slightly different, or support completely different
-features.
-
-This leads to subtle bugs where your published library behaves differently from the one in your
-development setup.
-
-For this reason we decided to err on the side of caution, and make the recommended usage
-the safe one.
-
-In the future we want to add watch support to building libraries so it is faster to see changes.
+```bash
+ng build my-lib --watch
+```
 
-We are also planning to add internal dependency support to Angular CLI.
-This means that Angular CLI would know your app depends on your library, and automatically rebuilds
-the library when the app needs it.
+Note: This feature requires that Angular's Compiler Option [enableResourceInlining](https://angular.io/guide/aot-compiler#enableresourceinlining) is enabled.
+This can be done by adding the below in your `tsconfig.lib.json`.
 
+```javascript
+"angularCompilerOptions": {
+ "enableResourceInlining": true,
+ ...
+}
+```
 
 ## Note for upgraded projects
 

packages/angular_devkit/build_ng_packagr/package.json

@@ -11,7 +11,8 @@
  "dependencies": {
  "@angular-devkit/architect": "0.0.0",
  "@angular-devkit/core": "0.0.0",
- "rxjs": "^6.0.0"
+ "rxjs": "^6.0.0",
+ "semver": "^5.3.0"
  },
  "peerDependencies": {
  "ng-packagr": "^2.2.0 || ^3.0.0 || ^4.0.0"

packages/angular_devkit/build_ng_packagr/src/build/index.ts

@@ -12,20 +12,55 @@ import {
  BuilderConfiguration,
  BuilderContext,
 } from '@angular-devkit/architect';
-import { getSystemPath, normalize, resolve } from '@angular-devkit/core';
+import { getSystemPath, normalize, resolve, tags } from '@angular-devkit/core';
+import * as fs from 'fs';
 import * as ngPackagr from 'ng-packagr';
-import { Observable } from 'rxjs';
+import { EMPTY, Observable } from 'rxjs';
+import { catchError, tap } from 'rxjs/operators';
+import * as semver from 'semver';
+
+const NEW_NG_PACKAGR_VERSION = '4.0.0-rc.3';
 
 // TODO move this function to architect or somewhere else where it can be imported from.
 // Blatantly copy-pasted from 'require-project-module.ts'.
 function requireProjectModule(root: string, moduleName: string) {
  return require(require.resolve(moduleName, { paths: [root] }));
 }
 
+function resolveProjectModule(root: string, moduleName: string) {
+ return require.resolve(moduleName, { paths: [root] });
+}
 
 export interface NgPackagrBuilderOptions {
  project: string;
  tsConfig?: string;
+ watch?: boolean;
+}
+
+function checkNgPackagrVersion(projectRoot: string): boolean {
+ let ngPackagrJsonPath;
+
+ try {
+ ngPackagrJsonPath = resolveProjectModule(projectRoot, 'ng-packagr/package.json');
+ } catch {
+ // ng-packagr is not installed
+ throw new Error(tags.stripIndent`
+ ng-packagr is not installed. Run \`npm install ng-packagr --save-dev\` and try again.
+ `);
+ }
+
+ const ngPackagrPackageJson = fs.readFileSync(ngPackagrJsonPath).toString();
+ const ngPackagrVersion = JSON.parse(ngPackagrPackageJson)['version'];
+
+ if (!semver.gte(ngPackagrVersion, NEW_NG_PACKAGR_VERSION)) {
+ throw new Error(tags.stripIndent`
+ The installed version of ng-packagr is ${ngPackagrVersion}. The watch feature
+ requires ng-packagr version to satisfy ${NEW_NG_PACKAGR_VERSION}.
+ Please upgrade your ng-packagr version.
+ `);
+ }
+
+ return true;
 }
 
 export class NgPackagrBuilder implements Builder<NgPackagrBuilderOptions> {
@@ -53,12 +88,30 @@ export class NgPackagrBuilder implements Builder<NgPackagrBuilderOptions> {
  ngPkgProject.withTsConfig(tsConfigPath);
  }
 
- ngPkgProject.build()
- .then(() => {
- obs.next({ success: true });
- obs.complete();
- })
- .catch((e) => obs.error(e));
+ if (options.watch) {
+ checkNgPackagrVersion(getSystemPath(root));
+
+ const ngPkgSubscription = ngPkgProject
+ .watch()
+ .pipe(
+ tap(() => obs.next({ success: true })),
+ catchError(e => {
+ obs.error(e);
+
+ return EMPTY;
+ }),
+ )
+ .subscribe();
+
+ return () => ngPkgSubscription.unsubscribe();
+ } else {
+ ngPkgProject.build()
+ .then(() => {
+ obs.next({ success: true });
+ obs.complete();
+ })
+ .catch(e => obs.error(e));
+ }
  });
  }
 

packages/angular_devkit/build_ng_packagr/src/build/index_spec_large.ts

@@ -8,9 +8,8 @@
 
 import { TargetSpecifier } from '@angular-devkit/architect';
 import { TestProjectHost, runTargetSpec } from '@angular-devkit/architect/testing';
-import { join, normalize } from '@angular-devkit/core';
-import { tap } from 'rxjs/operators';
-
+import { join, normalize, virtualFs } from '@angular-devkit/core';
+import { debounceTime, map, take, tap } from 'rxjs/operators';
 
 const devkitRoot = normalize((global as any)._DevKitRoot); // tslint:disable-line:no-any
 const workspaceRoot = join(devkitRoot, 'tests/angular_devkit/build_ng_packagr/ng-packaged/');
@@ -43,4 +42,59 @@ describe('NgPackagr Builder', () => {
  tap((buildEvent) => expect(buildEvent.success).toBe(true)),
  ).toPromise().then(done, done.fail);
  });
+
+ it('rebuilds on TS file changes', (done) => {
+ const targetSpec: TargetSpecifier = { project: 'lib', target: 'build' };
+
+ const goldenValueFiles: { [path: string]: string } = {
+ 'projects/lib/src/lib/lib.component.ts': `
+ import { Component } from '@angular/core';
+
+ @Component({
+ selector: 'lib',
+ template: 'lib update works!'
+ })
+ export class LibComponent { }
+ `,
+ };
+
+ const overrides = { watch: true };
+
+ let buildNumber = 0;
+
+ runTargetSpec(host, targetSpec, overrides)
+ .pipe(
+ // We must debounce on watch mode because file watchers are not very accurate.
+ // Changes from just before a process runs can be picked up and cause rebuilds.
+ // In this case, cleanup from the test right before this one causes a few rebuilds.
+ debounceTime(1000),
+ tap((buildEvent) => expect(buildEvent.success).toBe(true)),
+ map(() => {
+ const fileName = './dist/lib/fesm5/lib.js';
+ const content = virtualFs.fileBufferToString(
+ host.scopedSync().read(normalize(fileName)),
+ );
+
+ return content;
+ }),
+ tap(content => {
+ buildNumber += 1;
+ switch (buildNumber) {
+ case 1:
+ expect(content).toMatch(/lib works/);
+ host.writeMultipleFiles(goldenValueFiles);
+ break;
+
+ case 2:
+ expect(content).toMatch(/lib update works/);
+ break;
+ default:
+ break;
+ }
+ }),
+ take(2),
+ )
+ .toPromise()
+ .then(done, done.fail);
+ });
 });

packages/angular_devkit/build_ng_packagr/src/build/schema.json

@@ -10,6 +10,11 @@
  "tsConfig": {
  "type": "string",
  "description": "The file path of the TypeScript configuration file."
+ },
+ "watch": {
+ "type": "boolean",
+ "description": "Run build when files change.",
+ "default": false
  }
  },
  "additionalProperties": false,

packages/schematics/angular/library/files/__projectRoot__/ng-package.json

@@ -1,7 +1,6 @@
 {
  "$schema": "<%= relativePathToWorkspaceRoot %>/node_modules/ng-packagr/ng-package.schema.json",
  "dest": "<%= relativePathToWorkspaceRoot %>/<%= distRoot %>",
- "deleteDestPath": false,
  "lib": {
  "entryFile": "src/<%= entryFile %>.ts"
  }

packages/schematics/angular/library/index.ts

@@ -35,7 +35,6 @@ import { latestVersions } from '../utility/latest-versions';
 import { validateProjectName } from '../utility/validation';
 import { Schema as LibraryOptions } from './schema';
 
-
 interface UpdateJsonFn<T> {
  (obj: T): T | void;
 }
@@ -145,11 +144,6 @@ function addAppToWorkspaceFile(options: LibraryOptions, workspace: WorkspaceSche
  tsConfig: `${projectRoot}/tsconfig.lib.json`,
  project: `${projectRoot}/ng-package.json`,
  },
- configurations: {
- production: {
- project: `${projectRoot}/ng-package.prod.json`,
- },
- },
  },
  test: {
  builder: '@angular-devkit/build-angular:karma',

packages/schematics/angular/library/index_spec.ts

@@ -74,7 +74,6 @@ describe('Library Schematic', () => {
  const fileContent = getJsonFileContent(tree, '/projects/foo/ng-package.json');
  expect(fileContent.lib).toBeDefined();
  expect(fileContent.lib.entryFile).toEqual('src/my_index.ts');
- expect(fileContent.deleteDestPath).toEqual(false);
  expect(fileContent.dest).toEqual('../../dist/foo');
  });