I'm using yeoman's angular-fullstack generator with default parameters.
I would like to use ckeditor with https://github.com/lemonde/angular-ckeditor , so I extended my bower.json with the following lines:
"ckeditor": "#full/4.4.7",
"angular-ckeditor": "~0.4.2"
It works well in development mode ( grunt serve ), but it fails in production ( grunt serve:dist ). It tries to load /config.js and /skins/moono/editor_gecko.css and the language file dynamically, but it fails.
Have anybody idea how to solve it?
Had similar issue with ACE editor. What I did is I added override in bower.json
for ace looks like this
"overrides": {
"ace-builds": {
"main": [
"src-noconflict/ace.js",
"src-noconflict/theme-monokai.js",
"src-noconflict/worker-javascript.js",
"src-noconflict/mode-javascript.js"
]
},
for you ckeditor config you can specify it in a similar way in the overrides
i.e.
"overrides": {
"ckeditor": {
"main": [
"path/to/your/ckeditor.js",
"path/to/your/ckeditor/config.js"
]
}
}
for the CSS, not sure but if you check your gruntfile you might come up with a simple solution (i.e. add one more folder to the CSS sources).
If you find a nice CSS solution please post it as it could be helpful to more people ;)
Related
I am working on the requirement on Angular 8.
I need a feature that translates the UI on the local languages based on the locality So I am going through the Internationalization (i18n) feature in Angular 8.
I have understood the functionality and I am having one doubt.
to translate the page do I need to add i18 tags in all components?
can anyone give me some guidance on this?
Thanks in Advance.
Recently created an article on that topic ...
Internationalization
Introduction
The Introduction of ngx-i18nsupport sums up the problem pretty well
Angular has a specific way of dealing with internationalization (i18n). It is described in the official documentation Angular Cookbook Internationalization (i18n).
Said in one sentence,
markup your strings to translate in your templates with an attribute i18n
run the Angular extraction tool (ng-xi18n) to extract the strings in an XML Format called [XLIFF-1.2]
copy and then translate the extracted file for every language you plan to support
run the ng compiler to generate a special version of your app for the different languages
But there are some maior gaps in the workflow. That´s where this tool comes into play.
First, you have to create a complete translation, otherwise, the ng compiler will not generate a version. It is not possible to run with partial translation.
Second, whenever you change something in your app, you have to regenerate the xliff, but there is no documented way how to merge this with the already existing translated files. There are new translation unit, that you have to merge in, and there are translation units, that do not exist any more.
We're going to use the ngx-i18nsupport-package to solve this issue.
Prepare Angular-App for i18n
Install Package #angular/localize using the angular-cli
ng add #angular/localize
Add the i18n-section to your angular.json in your project-section. Add the languages you need and change the source of your translations (the language you use as default in code/html) if required NOT RECOMMENDED STICK WITH EN IF EVER POSSIBLE.
Also make sure to set localize to true for your production-configuration.
{
...
"projects": {
"yourprojectname": {
"i18n": {
"sourceLocale": "en",
"locales": {
"de": "src/locale/messages.de.xlf",
"fr": "src/locale/messages.fr.xlf",
"it": "src/locale/messages.it.xlf"
}
},
...
"architect": {
"build": {
...
"configurations": {
"production": {
"localize": true,
...
Install ngx-i18nsupport
Run the following command to install ngx-i18nsupport
npm install -g ngx-i18nsupport
Configure xlf-merge
Add the following block the root-section of package.json and change it for your needs.
"xliffmergeOptions": {
"srcDir": "src/locale",
"languages": [
"de",
"fr",
"it"
],
"preserveOrder": true,
"beautifyOutput": true
}
languages
languages your app needs to support. Make sure it matches the i18n-definition your angular.json!
srcDir
output-dir for translation-files. Make sure it matches the i18n-definition your angular.json!
preserveOrder
Ensures the order of you translation isn't changed (not ordered to abc or whatever). This makes it easier to compare different version of the translation files.
beatifyOutput
formats xml nicely
Add some translations to your code
Make sure you have actual translations in your app like
<p i18n>Some random pagagraph that needs translation</p>
or
alert($localize `User ${username} doesn't exist!`);
Generate Translation Files
Run the following command to generate translation files. If you changed the --output-path make sure to change it accordingly.
ng extract-i18n --output-path src/locale
Call xliffmerge now to fix the issues mentioned in the introduction
xliffmerge
Recommendation Add this Command to the scrips section in your
package.json
"scripts": {
"translate": "ng extract-i18n --output-path src/locale && xliffmerge",
"xliffmerge": "xliffmerge",
...
You can run npm run translate any time you want to upate translations.
Test your app in a different language
You may want to test how your app looks translated for a specific language.
Add a build-configurations and serve-options to set the localize-language for each language used in your app.
HINT Don't forget to replace yourprojectname
angular.json
{
...
"projects": {
"yourprojectname": {
...
"architect": {
"build": {
...
"configurations": {
"de": {
"localize": ["de"]
},
"fr": {
"localize": ["fr"]
},
"it": {
"localize": ["it"]
}
...
}
},
"serve": {
...
"configurations": {
...
"development-de": {
"browserTarget": "yourprojectname:build:development,de"
},
"development-fr": {
"browserTarget": "yourprojectname:build:development,fr"
},
"development-it": {
"browserTarget": "yourprojectname:build:development,it"
}
Run your app in the desired language
ng serve -o --configuration=development-de
Recommendation Add a script starting your app in your apps supported langauges simultanialy each language on a different port
package.json
"scripts": {
"start": "ng serve -o",
"start-de": "ng serve -o --configuration=development-de --port=4201",
"start-fr": "ng serve -o --configuration=development-fr --port=4202",
"start-it": "ng serve -o --configuration=development-it --port=4203",
...
Now you can run your app simultaneously in any language you like
npm run start-de.
Have Fun!
😄
It's great that ParcelJS just handles sass out of the box but I'm running into a problem where it keeps throwing an exception when it encounters a url within in my scss file. I guess Parcel is trying to locate the resource and rewrite the url. I do not want Parcel to do this. Is there anyway to disable this? I just want it to compile the sass and leave any urls in there alone.
This question was posted when Parcel v1 was the latest version. For folks arriving here in the future, you can accomplish this in Parcel v2 with the parcel-resolver-ignore plugin. Here's how:
Install it (e.g. yarn add -D parcel-resolver-ignore)
Create or modify your .parcelrc file to add it to the parcel pipeline:
{
"extends": "#parcel/config-default",
"resolvers": ["parcel-resolver-ignore", "..."]
}
Add a "parcelIgnore" entry to package.json that contains regex patterns that define which resources to ignore, e.g.:
{
// An array of Regex patterns
"parcelIgnore": [
"images\/*.*",
]
}
The things you want to target your regexes to match are the urls referenced in the .scss files, not the .scss files themselves.
I'm using the asp.net 5 typescript skeleton. When I bundle the application, inside the "dist" folder, I'm seeing a bunch of html and js files. According to the bundles.js file as in:
"bundles": {
"dist/app-build": {
"includes": [
"[**/*.js]",
"**/*.html!text",
"**/*.css!text"
],
If I'm thinking correctly, I should the the bundled version of those file with an app-build.html and app-build.js, yes. Instead I see all the files basically within the "src" folder.
What is working correctly though is the aurelia.js file is being generated properly from the following:
"dist/aurelia": {
"includes": [
"aurelia-framework",
"aurelia-materialize-bridge",
"aurelia-bootstrapper",
"aurelia-fetch-client",
more stuff here...
I haven't changed the skeleton at all. Just trying to get things to work.
Any ideas what may be going on?
Thank much
I'm not sure I understand your question completely and I'm not using the asp.net version of the skeleton but my Aurelia Typescript app has the following bundle config:
"dist/app-build": {
"includes": [
"[*.js]",
"*.html!text",
"[*/**/*.js]",
"*/**/*.html!text",
"*/**/*.css!text"
]
In my case index.html, app.ts (view root) and main.ts (aurelia config) are located in the 'root' folder src. The rest of my code is located in subdirectories.
All is in the title :)
How can I build css from sass file in vscode ?
In task file I just found lines for LESS not for SASS...
Thanks a lot !
I got it to work.
My root path has a /css folder underneath with my styles.scss file & the associated map file. I also had to fix my path for ruby. Once those two were working, my build showed an error where ruby couldn't find the scss file. So I fixed my task file - here is the working file. Notice the ${fileDirname} - that fixed the build errors for pathing.
{
"version": "0.1.0",
"command": "sass",
"args": ["${fileDirname}/styles.scss", "${fileDirname}/styles.css", "--trace"],
"isShellCommand": true
}
}
But this was just a test -- it doesn't watch and build more than 1 file as you would normally want to in a larger system. The docs for gulp/automation are here: https://code.visualstudio.com/Docs/languages/CSS
We don't have predefined problem matchers for SASS yet. You might want to open a feature request here https://code.visualstudio.com/Issues/List
But you can always create a problem matcher for SASS yourself. Have a look at the doc here: https://code.visualstudio.com/Docs/tasks#_defining-a-problem-matcher
I just can't get it work. I have a .scss file with some basic CSS.
Now, I have installed Ruby and I installed SASS like so - gem install sass.
What do I do to get it work on sublime?
I installed "SASS" so sublime acknowledge the .SCSS extension. I also installed SASS builder, and it actually works but in an strange way.
In addition to the compiled css file, it also adds .map file and a folder name .sass-cache.
Why Is that? How to I get rid of that? I don't need a .map file.
I also get an alert every single time the build is done. ("style.css has been compiled")
And not only that but I also get this comment at the end of my compiled CSS file:
/*# sourceMappingURL=style.css.map */
Please help, I'm lost.
Thanks in advance.
The .map file is for chrome (and maybe other browsers) to MAP your CSS that is rendered in the browser back to your actual SCSS. This is very very useful when debugging.
The scss-cache is just what it says it is a cache file that Sass uses. You can delete it but it will keep coming back every time you compile.
Once you go to production you can set Sass to not add any comments to your final css output file. You do this through a config.rb file if you are using compass.
Search on YouTube for LevelUp Tuts and Sass Compass install. Scott expanse how to get stared very well.
--sourcemap=none will disable the comment as well as the .map file creation. not so hard guys.
also, --no-cache will prevent creating the .sass-cache folder and its content.
Thanks anyway.
Try using SassBuilder for ST2. And you can config not to include comments, cache,etc with True/False.
{
"output_path": "../css",
"options": {
"cache": true,
"debug": false,
"line-comments": true,
"line-numbers": true,
"style": "nested"
}
}
For further info, click here.