I am trying to create a angular 4 project from angular cli and I am trying to import a custom html theme.Theme has and css files js files and some font files. Where put all those files?? in asset folder?? And after that I will import them in index.html as script and links? With that way I am getting some errors "can't resolve the dependencies" like fonts.Exist other way more efficient and "more right" for the angular standards like through angular-cli.json or something else??
I have searched everywhere how I do this but no luck.
Firstly generate new component and you can use this component to design your own template and to add own CSS
as follow:-
firstly generate new component ng g component mycomponent
new component will be created like below :-
mycomponent
mytest.component.css
mytest.component.html
mytest.component.spec.ts
mytest.component.ts
then you can add your styles at .CSS file, your all template at .html file and all logical content at .ts file
you can add this component at index.html
<app-mycomponent></app-mycomponent> // app-yourcomponent name
when you create the project i wonder you have a src folder. Inside this folder you have an assets folder: here you can paste all the code and images from your html code.
Next, you have these options:
Import the static files of your html theme one by one on the index.html in this way:
and so on..
In your angular-cli.json file:
"scripts": ["../src/assets/js/jquery.min.js"],
and so on with all your code scripts. The css styles have a styles array in the same angular-cli.json file.
Last but not least, if your html theme have images and other static content incorporated, you can access all this content in this way:
<img src="../src/assets/images/logo.png" alt=""></a>
so, you access the local folder of any file with ../ and if you want to access a superior folder you can use ../../ and so on until you get in the root folder.
Related
I'm having a javascript components that is distributed as .js file and .css file. In .js file the component is added to window
window.Component = { ... }
the component should be added to page with the following code Component.init('#componentHolderId', config);
I need to use my component in an Angular app (using Angular 11 if that matters).
Here are my questions.
Where is the best place in angular app to put .js file? Maybe it's somehow possible to add it to lazy-loaded module (as component needs to be used in a lazy-loaded module)?
Is there a way to add css to project other that adding it to styles array in angular.json? My concern here is that this way will slow-up application start-up.
You can add your .js file in the Scripts array of angular.json. so that it will be loaded.
Or you can add the .js inside the script tag inside body tag of index.html. (Sometimes it won't work because the some dom elaments are not present when loading index.html).
If you are using SCSS or any other CSS preprocessors, you can import your CSS files in your styles file.
I'm making simple components library. Basic project setup based on Webpack.
I've got all my components in separate folders with structure like below.
test/
|- test.html
|- test.scss
|- test.md
I'm loading HTML files in my app.js as string and creating previews and code snippets, but I can't load my SCSS files as raw content.
Here is the CodeSandox link with my project setup: preview link
What I need?
I need my .scss files content available in app.js as text, so I'll be able to generate snippets in code blocks available for a user.
I don't need help with compilation, it's all good there.
Thanks!
I want to use a component created using StencilJS in a regular basic HTML file. I followed these steps:
I have created a stencil component to create the basic my-component example:
npm init stencil
I want to use this component in an HTML file, so I ran
npm run build
I then created an html project with the following structure:
And then I moved the files from the dist folder into the script folder. And I added script tag in the head of my html file that references the component.js file like this:
<script src="script/{component_name}/{component_name}.js"></script>
And I used the component in the html like this:
<my-component first="Stencil" last="'Don't call me a framework' JS"></my-component>
But my component isn't being rendered. I get an error involving a esm.js file. Can someone help me with this process of compiling my stencil component to be using in a basic HTML project?
Stencil bundles your dist into modules and lazy-loads only the required code based on the components you are actually using in your HTML. So you should serve the whole dist folder along with your website.
The recommended way is to have the following two script tags in your html file:
<script type="module" src="/dist/[namespace]/[namespace].esm.js"></script>
<script nomodule src="/dist/[namespace]/[namespace].js"></script>
(where [namespace] is whatever is set in your stencil.config.ts)
This will instruct browsers who support ES Modules to use the esm bundle, and other browsers will use the ES5 (cjs) bundle.
If my-component is the only component that you're using from your library, then only that code will be lazy-loaded by your page. Stencil knows about component interdependencies and how to lazy-load them accordingly.
There is a new experimental output target (called custom-elements-bundle) that allows you to bundle everything into one js file, which will simplify distribution in some cases. It's only available with the new refactored compiler (which is available using the --next flag, after installing #stencil/core#next) (Stencil 2 has been out for a while now).
Background
Our web application follows a component-based design pattern, with each component containing a template, Sass partial, and JavaScript module, like so:-
components/action_button/_action_button.html.erb
/_action_button.scss
/action_button.js
The JavaScript module imports the component's Sass partial and the template is rendered via Rails. Webpack is configured with a number of loaders and plugins to compile the styles and extract (via mini-css-extract-plugin) the resulting CSS into a standalone stylesheet for each entrypoint e.g.:-
home.js => home.js, home.css
search.js => search.js, search.css
Components are imported into entrypoints based on usage (i.e. if action_button is present on 'home', then it's rendered somewhere within the view and import '~/components/action_button/action_button.js'; is declared within home.js.
The Problem
In order to improve the page loading experience we're manually #importing a select few component Sass partials into a critical.scss entrypoint, the outputted CSS is then inlined into the <head> of the document and the full stylesheets are loaded asynchronously.
Ideally, we'd like to do this dynamically and one method I've thought of is denoting the criticality of a component via the import statement. Perhaps using a custom loader?:-
import 'critical-loader!~/components/action_button/action_button.js';
The issue is that I've little idea of how that Webpack loader would work. I essentially want it to leave all existing rules in-place, but redirect the extracted CSS from Sass partials imported from within it to critical.css.
Does anyone know of an existing solution or have any idea of where to begin with a problem like this?
I don't have a huge website, but I still want to maintain css separate from my js files.
My folder structure:
static
css
style.css
js
landing.js
In my landing.js file, I have: import styles from '../css/style.css';
With the above mentioned setup, I am getting this error:
react-dom.production.min.js:12 Uncaught Error: Minified React error #130;
Am I doing something wrong? If I must use something like webpack to avoid getting minified errors, why is that the case? Why can't I just use simple CSS?
Note: I'm not using JSX
Link the css file from your main html file where you have the root div of your app.
For importing css in .js files in reactJs env you need to set up css-loader.
But if you don't want to play around with webpack or other bundlers, include your css in html file for now.
Other variant is write inline css in your React component, or use stylesheets like Radium.
Instead of importing it in styles just include your css like this
import '../css/style.css'; // ES5
require('../css/style.css');
later after compilation it will become part of your build.