What configuration should be done in Angular for use with Jekyll?

Asked

Viewed 117 times

1

I’m developing an application that will use Jekyll with its themes as the basis of the site, however, I need to create a Jekyll layout <jekyll_root>/_layout/angular.html which will be uploaded to the pages using Angular in accordance with the respective directive.

So it is necessary that instead of Angular when building the application (ng build) generates the file index.html according to the standard and the files js, it generates a file in the folder <jekyll_root>/_layout with the name angular.html, Javascript (js) files must be saved to the folder <jekyll_root>/assets/js/angular.

Other files should be copied to respective folders, such as "images" to <jekyll_root>/asset/images, "css" for folder <jekyll_root>/asset/css, etc..

What settings should be made in Angular for this behavior?

angular jekyll

  • The project and its code is being published on github on https:/github.com/Streetpet, the project is opensource and openhardware.

  • Do you need to REALLY use Jekyll and Angular? One of the problems you will face is that the two use keys in the templates, so Jekyll will remove things like {{exemplo}}. In order for the 2 to work together it will be necessary to change all angular tags to differentiate them from Jekyll tags.

  • Really this may be a problem, but at the stage I am at, I can only generate a new layout for Jekyll, that is to save the html in the folder _layout and the scripts in the folder js/angular according to the app project, since each app will generate a layout.

  • At the moment I’m copying everything to a folder inside _site and deploying on the server,

1 answer

0

I found the following solution.

I created a Workspace of the angular with the command ng new --skip-tests --skip-install Jekyll --directory . --defaults in Jakyll’s own working directory, so I edited the file angular.json and changed the following properties:.

"aot": true,
"optimization": true,
"sourceMap": false,
"buildOptimizer": true,
"outputPath": "app/voluntarios",
"baseHref": "/app/voluntarios/",

In particular outputPath that I pointed to the directory where the compiled angular files will be inside Jekyll before its build. I changed the directive baseHref to point to the base URL that will be the final result after the Jekyll build.

I also adjusted the following properties, with respect to the folder where my Angular project is:

"index": "../Angular/projects/JekyllFirebaseVoluntarios/src/index.html",
"main": "../Angular/projects/JekyllFirebaseVoluntarios/src/main.ts",
"polyfills": "../Angular/projects/JekyllFirebaseVoluntarios/src/polyfills.ts",
"tsConfig": "../Angular/projects/JekyllFirebaseVoluntarios/tsconfig.app.json",
"assets": [""],
"styles": [""],
"scripts": [""]

So I pointed each one to the folder where is the project that will result in the files used by Jakyll.

I finally run Jekyll and let him monitor the changes and continue my work with angular in another terminal, where I leave the angular also monitoring the changes, but not with the command ng server, but rather with ng build, see that both Jekyll and Angular command are executed in the angular workbook.

Browser other questions tagged angular jekyll

You are not signed in. Login or sign up in order to post.