Angular 6 Workspace :: Test-Drive

All The Cool Cats are Using Workspaces Now, Are YOU?

application: is a single-page web application.
library: is a module that is shared by multiple applications

Uses for an Angular Workspace

ng generate module MyNewModule
ng generate library MyNewLibrary

Non-Published Libraries

"package": "ng build --project=libOne && ng build --project=libTwo",
npm run package

workspace-demo

ng generate library libOne
ng generate library libTwo

Using a Library

Application-to-ServiceOne-to-ServiceTwo

ng serve

Angular 6 Workspace for Publishing Libraries

npm install -g @angular/cli@latest
ng new buildmotion

New Configurations using angular.json

"$schema": "./node_modules/@angular/cli/lib/config/schema.json",

Application Project

Library Project

Create Workspace Items

Web Application

ng generate application webOne
ng build --project=webOne
ng serve webOne

Library

ng generate library @buildmotion/libOne
{
"name": "@buildmotion/lib-one",
"version": "0.0.1",
"peerDependencies": {
"@angular/common": "^6.0.0-rc.0 || ^6.0.0",
"@angular/core": "^6.0.0-rc.0 || ^6.0.0"
}
}
"libOne": {
"root": "projects/buildmotion/lib-one",
"sourceRoot": "projects/buildmotion/lib-one/src",
"projectType": "library",
"prefix": "lib",
...
}

Add a Service to the Library

ng generate service hello  --project=libOne
import { Injectable } from '@angular/core';@Injectable({
providedIn: 'root'
})
export class LibOneService {
constructor() { }
}
import { Component, OnInit } from '@angular/core';@Component({
selector: 'lib-libOne',
template: `
<p>
lib-one works!
</p>
`,
styles: []
})
export class LibOneComponent implements OnInit {
constructor() { } ngOnInit() {
}
}

Use the Library in the Application

import { LibOneService } from 'dist/@buildmotion/lib-one/public_api';
import { LibOneService } from '@buildmotion/lib-one';
import { Component, OnInit } from '@angular/core';
import { LibOneService } from '@buildmotion/lib-one';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'app'; constructor(
private oneService: LibOneService
) {
} ngOnInit(): void {
this.title = this.oneService.SayHello("Angular 6 Workspace");
}
}

Import Reference Fix

"paths": {
"@buildmotion/lib-two":["dist/@buildmotion/lib-two"],
"@buildmotion/lib-one":["dist/@buildmotion/lib-one"]
}
"package": "ng build --project=libTwo && ng build --project=libOne",
npm run package
ng generate library @buildmotion/libTwo
ng build --project=libTwo
SayHello(message: string): string {
if(message) {
this.libTwoService.SayHello(message);
}
return 'Next time send in a message.';
}
import { Injectable } from '@angular/core';@Injectable({
providedIn: 'root'
})
export class LibTwoService {
constructor() { } SayHello(message: any): any {
return `Hello ${message}.`;
}
}
npm run package

Library Peer Dependencies

ng serve --project=webOne

Wrapping Up

I love tacos, code, jazz, my husky and maybe 3 people in this world...and of course: Angular. Angularlicious podcast — more info at www.AngularArchitecture.com