I have setup the cross browser extension boilerplate
https://github.com/EmailThis/extension-boilerplate
I want to be able to load html content inside my javascript code example
import contentTemplate from "../content.html";
I have found some plugins but they all work with webpack,
how can I do the above without webpack ?
I have done that with the following plugin
https://www.npmjs.com/package/babel-plugin-transform-html-import-to-string
Related
I am new to using reactjs. I have an html file where i am trying to enter a react component . The react is described in two files: index.js which is "importing" a main.js file.
i want to have those components in my webpage. Can anyone tell me how can i do it ?
I tried using a script in my html file :
script src="index.js"
but it is not working.
I am totally new to this .
Reactjs is a group of components which bundled together to make a single page app.
I suggest reading the documentation of Reactjs
React js library is used to build a single page application. And it is a component-based library. You write your components and then render them into a single HTML div tag.
You should start your react journey with create-react-app boilerplate (https://reactjs.org/docs/create-a-new-react-app.html#create-react-app).
I was trying to import bootstrap's css and material design's one into my angular application but i found at the same time an issue and a compromise.
If I include them with "link href" in my index.cshtml file, I get as
result that this prevents my angular app from loading.
If I include them with #include into my main .css file (which is
called by require("style-loader!./styles.css"); ), it actually
works but this prevents my app from parallel .css download and the
result is that - yes, it works - but that slows my app a lot.
I saw that lot of people include them into the proper angular-cli json file but my app is not an angular cli application so I actually can't do that.
So the question is: can you suggest me what's the best way and the best practice to include the css in a non-angular cli application?
OTHER INFORMATIONS:
I am using also webpack, don't know if this changes or means something for my question
One thing good to know about the angular CLI is that in the background it makes a call to webpack to bundle your application with bootstrap
(if you put the proper line in the angular-cli.json file
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
)
As you are not using the angular.cli.json file, you have to directly import the bootstrap framework with webpack. A link which might help you to import boostrap with webpack : https://getbootstrap.com/docs/4.0/getting-started/webpack/
I hope it will be helpfull !
I developed an application with angular 4 for security reason and changing the template without compiling I am trying to find a way can change HTML and application use that. somehow I need to read HTML template files from an external folder and use that.
I tried to find a way, but unfortunately I could not get a direct answer I hope here I can found out is it any solution for that or not?
what I did are:
https://github.com/lacolaco/ng-dynamic
Load Angular2 template from external URL
Equivalent of $compile in Angular 2
Angular 4 Template Binding with ES6 Template String
Dynamically load HTML template in angular2
How to bind raw html in Angular2
Previously Angular were shipping angular-compiler in build (bundle js) for security reason they removed angular-compiler from bundle and reason is obvious that angular compiles code on build and there is no need to ship compiler. It creates extra overhead on your production site and also creates heavier bundle. So the answer is no. You cannot inject template from external source. Why not create a component and use condition to show your external html in this way?
I have been building SPAs (Single Page Applications) using React. Whenever I start a new project, I use create-react-app. So far so good.
I now have received a request to load a React application as a widget within an existing HTML page.
My question: how do I achieve this? I can refer to the react files using the CDN links as well as Babel however I am having trouble wrapping my head around packaging this all up using Browserify or Webpack.
Any of you have experience with this already? Perhaps you can share with me what works best.
I have tried googling this with not much luck.
Thank you.
Just add lines to webpack.config.js
...
externals: {
'react': 'React',
'react-dom': 'ReactDOM'
},
plugins: [...],
....
to exclude React from bundle and then add it at page before your bundle
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<script type="text/javascript" src="/scripts/app.bundle.js"></script>
(it will mount as usual to specified HTML element)
Does Polymer and/or native Web Components use ES6's SystemJS modules technology?
https://github.com/systemjs/systemjs
Or do they rely on their own asset management?
Existing Web Components don't really use SystemJS but it's now possible to use it with systemjs-plugin-html to load HTML imports and circumvent the issues they have. SystemJS can redirect paths so that for example the same library expected in different locations can be redirected to the same file, and components can be more freely placed in different directories. Of course, this doesn't fix paths in the <link rel="import"> tags of existing components but new components can be created without them, while still more flexibly re-using existing components.
I've written an article with downloadable code and a working demo for how to use Polymer with SystemJS and TypeScript.
The Web Components specification is a set of four other specifications where one is about the HTML Imports technology. Web Components do not solve any module issues at a first glance. However, HTML Imports are the key to import components from anywhere into your app.
If you have componentA that imports a componentB and you import componentA into your web app, componentB is first imported and then componentA. So you kind of setup an implicit dependency tree that is resolved by HTML Imports automatically (which is why HTML Imports work asynchronously).
In short: no. They use HTML Imports to manage components.
No. In fact SystemJS modules are not support in browser yet. Currently polymer and x-tag use HTML import to load web component, but Mozilla rollback the HTML import support in nightly build and want to seek for SystemJS instead. (Eventually HTML import might duplicate once SystemJS is supported in browser).
In Firefox OS they just import web component as normal js library and not use HTML import.
ex: gaia-switch element
https://github.com/gaia-components/gaia-switch