![]() Note: you will have to give the path to your html file in the component typescript 'my-root', you are ready to code your files in pug!! To write the files To execute the pug script run npm run afterInstall Just in case, remove any old package file Since both these scripts are listening scripts, we need tthem to run concurrently (simultaneously). Ng serve serves your project in the browser. Pug -w src helps us to watch over the src files and create corrosponding HTML files as we edit. "afterInstall": "node pug-rule-insert.js", In the scripts section of package.json, add the following scripts. Let file = fs.openSync(commonCliConfig, 'r ') Ĭonst commonCliConfig = this throws error, find out where common.js file is and change the path accordingly. add a rule fileĬreate a file in the root directory and name it pug-rule-insert.js const fs = require('fs') Ĭonst commonCliConfig = pug_rule = `\n\t\t\t\t\t\t\t\tĬonst position = configText.indexOf('rules: [') 8 Ĭonst output =. P(class="class" i) some text Installing Firstly, we need to install pug and cli npm install pug pug-cli pug-loader -g 2. It has helpers like loops, computations and variables. Additionally, it allows variables and loops for coding block repetition. What is pugįor those who don’t know, pug ,formerly known as jade, is an HTML templating engine that has simple syntax to write clear html code. This is in spite of many more efficient options such as Pug, Slim, HAML among others being in existence. ![]() However, when it comes to templates, only two options are available: HTML and SVG. This does not contain tutorials about node, npm, or angular itself.Īngular CLI supports multiple built-in CSS preprocessor options for component styling like Sass/ SCSS, LESS, and Stylus. The purpose of this blog is to provide step by step steps to setup pug with angular. ![]()
0 Comments
Leave a Reply. |