Has anyone had success incorporating .pug into angular-cli?
I attempted to use npm install pug --save, but I am unsure of where to update the rendering from .html to .pug.
You can find the angular-cli link here
If anyone could provide a brief tutorial, it would greatly benefit many users :)
To enable Pug support in your Angular 6+ project, execute the ng add ng-cli-pug-loader command within the main directory of your angular-cli project.
After researching on the angular-cli git, it appears that implementing pug may not be a priority in the near future.
However, I found a workaround: Instead of using angular-cli, you can use an updated generator that supports the latest version of Angular 2.
You can try the angular2-webpack generator from AngularClass - here (Just follow the detailed instructions provided)
If you want to include pug support, simply visit this link here
For SCSS integration, follow this link here
To summarize, install npm and add the necessary lines in the webpack.common file. Then, use require() in your component with ./filename.pug :) Just make sure to follow the provided links for guidance.
Big thanks to AngurlarClass! <3
This is exactly what I was looking for - a combination of angular2, typescript, scss, and pug. Delicious!
loaders: [
{
test: /\.pug$/,
loader: 'pug-html-loader'
},
{
test: /\.scss$/,
exclude: /node_modules/,
loaders: ['raw-loader', 'sass-loader'] // Remember, it's sass-loader not scss-loader
},Utilizing the capabilities of angular-cli, you can implement this solution.
npm install pug-cli --save-dev. This allows you to convert your .pug files into .html.package.json: "puggy": "pug src -P -w". This command will compile all .pug files within the src directory into .html and initiate monitoring for changes. The specific task name is arbitrary.start script or create a new one that executes puggy before launching the development server: "start" : "npm run puggy & ng serve"Your package.json file should resemble the following:
"scripts": {
"ng": "ng",
"start" : "npm run puggy & ng serve",
"puggy": "pug src -P -w",
. . . additional tasks
}
To observe the results, simply execute npm start (or whichever custom task title you opted for) in your terminal. You'll witness the compilation, monitoring, rendering, and serving of all your .pug files.
As a recommendation, include all generated .html files in your .gitignore using /src/**/*.html, ensuring only .pug files are pushed to your repository. Eliminate cached .html files with git rm --cached *.html.
With this setup, crafting a form like below becomes effortless:
form(novalidate, '#f'='ngForm', '(ngSubmit)'='onSignin(f)')
Which translates to the following HTML upon compilation:
<form novalidate="novalidate" #f="ngForm" (ngSubmit)="onSignin(f)"></form>
After relying on the ng-cli-pug-loader method for a while, I decided to find a more stable way to incorporate pug support into my Angular projects. While this new solution isn't as seamless as I'd like it to be with the Angular CLI, it gets the job done without too much hassle.
If you're interested in learning more about my updated approach to integrating pug into Angular, feel free to visit this page and check out the README section for details.
For those looking for an even smoother method that eliminates the need for a new AngularCompilerPlugin, take a look at angular.webpack.js and the addSimplePugSupport function.
Your feedback is valuable to me, so please don't hesitate to leave comments here or on my Git repository if you spot any issues with this implementation.
Preference for Stylus over other options.
{
test:/\.styl$/,
use: ['to-string-loader', 'css-loader', 'stylus-loader'],
}
The configuration for SCSS has been updated
{
test: /\.scss$/,
use: ['to-string-loader', 'css-loader', 'sass-loader'],
exclude: [helpers.root('src', 'styles')]
}
Sharing my router setup: Routes = [ { path: 'building', component: BuildingComponent ,children:[ { path: ':id', children: [ { path: 'details',loadChildren: '...'}] }, { path: '', pathMatch:&a ...
I am currently developing a small utility that generates typesafe remapped object/types of compound enums. The term "compound" in this context refers to the enum (essentially a const object) key mapping to another object rather than a numeric or literal va ...
(If this post is already out there, just let me know. I've checked other discussions similar to this but couldn't find a solution that worked for me). I'm dealing with a situation where I have a component that includes a child modal (modal ...
Struggling to toggle the visibility of a header and row based on the value of a boolean in the component. I managed to hide a specific td element but can't seem to hide an entire column. For instance, in the code snippet below, I want to hide the "Las ...
I need to transfer the boolean value retrieved from myForm.valid to my Angular 2 component. This involves retrieving it in the component using two-way binding since it is a template-driven form. The current code provided does not seem to be working for t ...
I am currently working on an Angular 6 project. In my app.routes, I have set it up like this. However, I am facing an issue where I can only access the route using localhost:4200/#/Student instead of localhost:4200/Student. Can you help me identify where t ...
After loading a list and pushing it into a FormArray, I am in need of dynamically setting the disabled property for certain fields. My question is: Can I achieve this by using only the patchValue method? I attempted something like this.rowArray.controls[i ...
I need to automatically generate documentation for my Intern 4 functional tests. I attempted using typedoc, which worked well when parsing my object page functions. However, it failed when working with functional test suites like the one below: /** * Thi ...
Currently, I am working with a dataset retrieved from an API and dynamically creating checkboxes in my HTML page using the DataView component from PrimeNG. My objective is to implement a feature where users can select or deselect all checkboxes with a cli ...
<div *ngFor = "let element of myElements, let i=index" [ngClass]="{'selected':element[i] == i}"> <li> Name: {{element.element.name}}</li> <li> Description: {{element.element.description}}</li ...
Consider this function for parsing strings. const { a, b } = parseString({ string, mapping: [{ param: 'a', ... },{ param: 'b', ... }] Is there a way to restrict TypeScript to accept only &a ...
Hello there! I've encountered an issue where the bar chart overlaps when the screen width is too low. It seems to be related to the maintainAspectRatio property, which I set to false because I wanted the charts to shrink only in width, not in both axe ...
New to the world of Ionic/Angular development, my project structure looks like this: - src -- /app ---- app.component.ts ---- app.module.ts ---- main.ts ---- ... -- /pages ---- /event-home ------ /event-home.module.ts ------ /event-home.ts event-home.mod ...
I've hit a roadblock while attempting to integrate a JSON response into an ion-option tag in my HTML code: <ion-item> <ion-label>Country</ion-label> <ion-select formControlName="country"> ...
Currently, I'm facing an issue with the size of a selector, <component-selector></component-selector>. It seems to be displaying too large and cutting off the right side of the contents. I've attempted the following code: <div sty ...
Currently, I am in the process of learning Angular 2 and find myself unsure about the most efficient way to update the view. For instance, let's say I have two components: User and Main. The User component retrieves a list of users from the UserServ ...
Within my system, there is a login component structured as follows: @Component({ selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.scss'], changeDetection: ChangeDete ...
I've noticed some similar questions, but none of them seem to address my particular issue. I'm currently working on a webapp using next.js (with typescript). Within the app, I am utilizing recharts, however, I am encountering a compilation error: ...
Looking at the following example. import { QueryClientContract, TransactionClientContract } from '@ioc:Adonis/Lucid/Database' I am puzzled by the use of colons and I am unsure about where the imported files are being referenced from. ...
As a newcomer to Angular2/4, I am facing an issue where the details fetched and saved in my interface are disappearing upon interface refresh. How can this problem be resolved without losing the interface details after a refresh? Here is my Login.componen ...