The purpose of this guide is to have a working setup with Angular CLI while using Pug. I had some problems while getting the three of them to work together.I’m going to assume you know a little bit of Docker (Although it’s not necessary) to keep it working. Docker Here’s the with the finalized code. GitHub repo : Some Notes This guide works for existing and new applications. Angular-CLI You must have NodeJS 8+, Docker v18+ (Not necessarily, you can change the compose version to a lower number) already installed. I’m currently using Windows 10 with Ubuntu installed. It’s important to note this because node-sass is going to give you problems when you try to run it with node_modules (Only happens with Windows) The pug image was taken from user Mamugi1492 at RedBubble Step #1 — Creating the new Angular Project Skip this step, and go to #3 if you have an existing project that you want to Dockerize. If you’re running Windows, and you will start fresh, skip to step #2. Others (Mac/Linux), do the following: npm install -g @angular/cli ng new angular-pug-sass-docker-app --style=scss This will install the angular cli globally, and then create a new angular app with Sass. Change angular-pug-sass to your project’s name. Step #2 — Windows Only On Windows, if you create an app with the CLI, Node-Sass automatically sets itself up with said OS in mind. When you use Docker, you will run it via a Linux image. Once you mount the directory (so we can edit without rebuilding), it references the node_modules directory which has the node-sass installed with Windows. You can either delete node_modules . Or, force rebuild node-sass. Unfortunately, I was not able to get it to work with any of these methods. That’s why I recommend you to follow option #1, and leave option #2 as an alternative. Option #1 — Create the New Angular Project within Windows’s Linux distro (Recommended) You will need to install Ubuntu on Windows 10 (Or any Linux version) . You probably have it, since you must’ve installed Docker. https://docs.microsoft.com/en-us/windows/wsl/install-win10 Open the Ubuntu Terminal and go to the directory you want to create the new app. In my case, I’m going to specify it in the desktop: We do this by mounting the C drive ( ) and navigating to my desktop location /mnt/c C:\Users\jjancp\Desktop. Combining both, we have: cd /mnt/c/Users/jjancp/Desktop Global install the cli: sudo npm install -g @angular/cli Create the new angular project: ng new angular-pug-sass-docker-app --style=scss Option #2- Create the New Angular Project within Windows and then use npm rebuild node-sass This method didn’t work for me. In here, you install your modules directly from Windows, as any common project: Globally installing the angular-cli in PowerShell or CMD: npm install -g @angular/cli Then, create the new Angular Project: ng new angular-pug-sass-docker-app --style=scss Step #3 — Add the ng-cli-pug-loader Read (Optional), about the ng-cli-pug-loader. this article from Mark Pieszak Thanks danguilherme for the loader injector! ng add ng-cli-pug-loader This command will install all the packages from package.json and add a file called at the project’s root, it will add pug-loader, pug, and apply-loader to the devDependencies. Finally, it’s going to include a run command in the package.json’s postinstall . ng-add-pug-loader.js What this does, as explained in the linked article above, is that it edits the Webpack Config file from Angular, and injects the Pug loader to it, without the need to eject the Angular app!. : We do this manually, without specifying a docker image because we will to run ng add again. I was personally having problems when I tried to automate with Docker the whole process. Something important not need Step #4 — [ERR_INVALID_CALLBACK]: Callback must be a function in ng-add-pug-loader.js I was noted that I had an issue with how I implemented fs’ synchronous versions (There are no callbacks). I have fixed them in the repo and in the post. Update (July 11, 2018): You may come up with this problem. I still don’t know what’s the cause of the problem. But changing all the methods to synchronous seem to fix the following error: fs TypeError [ERR_INVALID_CALLBACK]: Callback must be a functionat maybeCallback (fs.js:133:9)at Object.writeFile (fs.js:1139:14)at fs.readFile (/usr/app/ng-add-pug-loader.js:20:6)at FSReqWrap.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:53:3)error Command failed with exit code 1. A quick and dirty solution is to edit the ng-add-pug-loader.js. So go and open the file: Here’s the file ( I created an ): issue in the repo /** * Adds the pug-loader inside Angular CLI's webpack config, if not there yet.* @see */ https://github.com/danguilherme/ng-cli-pug-loader const fs = require('fs');const commonCliConfig = 'node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/common.js'; const pugRule = '{ test: /.pug$/, use: [ { loader: "apply-loader" }, { loader: "pug-loader" } ] },'; // See these:// // // Thanks to danguilherme and Straker Carryer for spotting the issues with my approach https://github.com/danguilherme/ng-cli-pug-loader/issues/5 https://medium.com/@strakercarryer/oh-man-thank-you-for-posting-your-4-e5e307fe816b try { // Just in case the file isn't found.const data = fs.readFileSync(commonCliConfig);const configText = data.toString();if (configText.indexOf(pugRule) > -1) { return; } const position = configText.indexOf('rules: [') + 8;const output = [configText.slice(0, position), pugRule,configText.slice(position)].join(''); const file = fs.openSync(commonCliConfig, 'r+'); // Insert the pug webpack rulefs.writeFileSync(file, output);fs.closeSync(file); } catch (e) {console.error('There was an error while injecting the pug loader', e);} Step #5 — The Dockerfile I changed the NPM installation of the angular-cli before the yarn install. Everything else, remains the same. Update (July 11, 2018): # Installs the current application on a Node Image.FROM node:10.5 # The qq is for silent output in the console# You are welcome to modify this part as itRUN apt-get update -qq && apt-get install -y build-essential libpq-dev vim # Sets the path where the app is going to be installedENV NODE_ROOT /usr/app/ # Creates the directory and all the parents (if they don’t exist)RUN mkdir -p $NODE_ROOT # Sets the /usr/app as the active directoryWORKDIR $NODE_ROOT # Copies all the content COPY . . # Install all the packagesRUN npm install -g @angular/cliRUN yarn install # Uncomment this if you went with Option #2 in Step #2 (Windows Only)# RUN npm rebuild node-sass --force # The default port from ng serve (4200)# and 49153 for Webpack Hot Module ReloadEXPOSE 4200 49153 Create an extensionless file, called and add it to the project’s root. Copy the contents above. If you’re experienced with Docker, you may see that we’re copying the whole folder, and then running the install. We can opt to copy the , , and the files and run yarn install. I found some problems (could be due to my setup) to get it working. Dockerfile ng-add-pug-loader angular.json package.json If you decided to go with Step #2 Option #2 (Windows only). It’s likely that you’re going to have issues. Try seeing if the rebuild works. I tried it, and it didn’t. node-sass If you’re having problems with the image, go to the Appendix at the bottom. .dockerignore .dockerignore./log./tmppackage.lock.json.git*Dockerfile**docker-compose*node_modules Create a nameless file with extension and copy the contents above. .dockerignore Step #6 — Create the docker-compose.yml file Create a file in the root of the project, add the following: docker-compose.yml version: ‘3.6’services:app:build: .command: “npm start”ports:- “4200:4200”- "49153:49153"expose:- “4200”- "49153"volumes:- “./:/usr/app/” The key will map our current directory to the Docker image’s content. This way, we don’t need to reload the container to see the changes. volumes If you check the from the docker-compose you’ll see that it’s going to run . We need to make a slight adjustment inside the package.json npm start ng serve Step #7 — Update the package.json For it to be correctly exposed to the outside world, we need to go to the start script and modify it. In addition, we need to add a so Angular CLI can pick up the changes within the container: polling mechanism From: “start”: “ng serve”, To: “start”: “ng serve --host 0.0.0.0 --poll=500”, This command will let you navigate via http://localhost:4200 Example for the ng start script The polling mechanism is measured in milliseconds. You can tune this to your preference. Step #8— Change .html to .pug Do change the main not index.html to .pug. The loader will not parse it. Update app.component.html to app.component.pug Update its content: div(style='text-align:center')h1| Welcome to {{ title }}!img(width='300', alt='Angular Logo', src='data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==') h2 Here are some links to help you start:ullih2a(target='_blank', rel='noopener', href='https://angular.io/tutorial') Tour of Heroes li  
  h2  
    a(target='\_blank', rel='noopener', href='https://github.com/angular/angular-cli/wiki') CLI Documentation  
li  
  h2  
    a(target='\_blank', rel='noopener', href='https://blog.angular.io/') Angular blog Update app.component.ts Change: templateUrl: ‘./app.component.html’, To: templateUrl: ‘./app.component.pug’, This is how it will look: import { Component } from '@angular/core'; @Component({selector: 'app-root',templateUrl: './app.component.pug',styleUrls: ['./app.component.scss']})export class AppComponent {title = 'app';} Step #9 — Run the app Navigate to the folder’s project and run: docker-compose up All set 😁😊🎉🎉🎉🎉🎉🎉🎉🎉 Appendix A If you’re running Windows and had an existing Angular app with the CLI and you’re having issues while Dockerizing the app, the solution is going to be to use Option #1 in Step #2. Remove the folder. node_modules , or Vagrant on Windows 7/8.x Install Ubuntu on Windows 10 Open the Ubuntu Command, and map it to your installation. In the case of Ubuntu on Windows 10, do it like this: cd /mnt/c/Users/MyUser/Path/To/Angular-Project 4. In Ubuntu: Install . NodeJS 5. Perform a or yarn install npm install Appendix B — Security Vulnerability (As of this writing — June 27, 2018) in one of the dependencies. There seems to be an old dependency that the angular-cli uses (And NodeSass) that GitHub is alerting of a security vulnerability. Investigating further the issue, it seems that is an old version from . We do not have control of this, as it gets pulled automatically from the dependencies. Hoek Hapi These seem to be the issues that address these problems: https://github.com/angular/angular-cli/issues/10480 https://github.com/sass/node-sass/issues/2355

Microsoft

Target

SASS, LESS, CSS without JavaScript in Polymer 3 with Webpack

What’s new for the Web — Google I/O 2018

Follow me on Twitter and LinkedIn for more information

Nominated for 2022 - HackerNoon Contributor of the Year - Typescript

Nominated for 2022 - HackerNoon Contributor of the Year - Performance

Too Long; Didn't Read

Make resilience your competitive advantage

Using Docker, Docker Compose, Angular-CLI 6+, Sass, and Pug (Jade)

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

How to Create a Monorepo With Vite, Cloudflare, Remix, PNPM and Turborepo (No Build Step)

10 Useful JavaScript Functions to Learn

10 Cool Angular Material Admin Dashboard Templates

13 Angular App Optimization Tips for Frontend Developers

25 Stories To Learn About Angularjs

How to Create a Monorepo With Vite, Cloudflare, Remix, PNPM and Turborepo (No Build Step)

10 Useful JavaScript Functions to Learn

10 Cool Angular Material Admin Dashboard Templates

13 Angular App Optimization Tips for Frontend Developers

25 Stories To Learn About Angularjs

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps