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


ng generate library libOne
ng generate library libTwo

Using a Library


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


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: `
lib-one works!
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';
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": {
"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) {
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