I'm trying to make a web application but i keep getting the error:
Uncaught ReferenceError: Platform is not defined
In the polymer.js file I downloaded from the website. How do H fix this?
I tried to re-download it and redid the import, which got rid of the other errors but this one persists.
You need to also load platform.js (the polyfills). Make sure it is the first script loaded on your page and comes before any HTML imports:
<script src="bower_components/platform/platform.js"></script>
The basic setup is here: http://www.polymer-project.org/docs/start/usingelements.html#using
More info here: http://www.polymer-project.org/docs/start/getting-the-code.html
platform.js was replaced now for webcomponents.js
If you are sure that is all right with your section and even so the error remains, there is something wrong with your environment (maybe some incompatibility between different versions of components or scritps).
Clear and download all your components and scripts again from the sources. I recommend use of Bower for that. Just wipe your repository and make a fresh bower install.
Related
We have a React app built with Create React App with Typescript and webpack 3 with split chunks. Our app is used in our clients' websites - they load it into their website with a script tag, and then launch it. When our app is launched, it appends a new element to the body, and renders itself into it.
This solution has worked perfectly thus far, but we now have a new client who is experiencing some kind of clash between their bundle and ours upon integration of our module into their website.
The specific error we're seeing is this: Uncaught (in promise) TypeError: Cannot read property 'createElementNS' of undefined. This error is coming from the first chunk. I think this is happening because only the first chunk is loaded, not the subsequent one/s, which in turns is probably happening due to a clash between the bundles.
I added the following to our config in an attempt to fix this problem:
output: {
// ...
jsonpFunction: 'wpJsonpChargeAfter',
}
But the bug still persists.
I'm starting to think maybe I need to change something in the libraryTarget to prevent the clash. Possibly set it to umd?
So the main question here is: what do I need to change in the webpack config to allow a webpack bundle to run within another web app without any clashes?
Any help would be appreciated.
I am trying to experiment with tinymce npm. I am following their guide and I am stuck here
Include this line of code in the <head> of your HTML page:
<script src="/path/to/tinymce.min.js"></script>.
Now inside my head in html, I put this code
<script src="node_modules/tinymce/tinymce.min.js"></script>.
however in the console, there is an error Failed to load resource: net::ERR_FILE_NOT_FOUND
I also find another stack overflow question related to my problem and came across this one
I also tried using the solution here and this is what I did but still the same error.
<script src="scripts/tinymce.min.js"></script>
here is a screenshot of my sample project.
I am trying to get tinymce.min.js to index.html which is inside views/blog folder
My question is, how can I make this work?
A simple fix for you would be to use a CDN instead of NPM.
Replace this: <script src="node_modules/tinymce/tinymce.min.js"></script>
With this: <script src="https://cdnjs.com/libraries/tinymce"></script>
Below I give my guess at the issue, but I can't be sure without inspecting your whole project:
I think you are neither building nor serving your project. In your sample project I don't see any webpack, gulp, grunt, or other build tool config file. I also don't see anything like Browserify or similar. Those tools would be able to read your script pointing to a local npm folder and replace it with the script from the npm folder. Without those tools, your browser will think the src= string is a web url and the resource will not be found.
As I mentioned, a CDN is a simple fix because that is a real website hosting the script you are asking for. A more complicated approach which is used in commercial development is to have a complete build process and then a server.
I am using Angular 5 + Webpack for one of my projects. Now I want to load all assets with JS files (including lazy loaded .chunks.js files) from a CDN.
For CSS and images, I have changed the publicPath option of the webpack so I am able to load CSS and images from the CDN, but the problem is with JS files.
For JS file I have changed the <base href="{{CDN-PATH-HARE}}"> but it gives me this error
I also tried renaming the JS file using webpack but that trick also didn't work.
I just want to know whether I am going in a right direction or I should think it in a different way.
Thanks.
I imagine the "using CDN when performing tree-shaking" discussion could be a fairly involved one...
This answer assumes that the break happens only when switching to the CDN, and that your app is properly served otherwise. Are you sure your app is being served?
The history API is used by angular, but because the origin is different, it's being treated as a security issue.
Assuming external cache-able libraries in a CDN should be included in your bundling, you can try a couple options listed below. I would revisit that assumption first. The point of webpack is to treeshake and then bundle, so I would make sure you are convinced of the benefit of bundling files that are cached and bundled on CDN already.
If you are sure you want to take this approach, you can do a couple things. You can either use hashlocationstrategy on your angular router:
imports [
RouterModule.forRoot(routes, {useHash: true})
]
Or, you can fully host your app when building it, using node's http-server, and play with the host baseUrl in your app's index.html.
Finally, if none of that works for you, you could try using a htaccess file, or doing some manual routing, but I have found those approaches to be a little brittle.
There's a couple pre-existing questions on SO that handle this issue somewhat, but I thought the CDN wrinkle warranted a fresh response.
Angular 5 : Failed to execute 'replaceState' on 'History': A history state object with URL cannot be created in a document with origin 'null'
ng build failed to execute 'replaceState' on 'History': A history state object with URL cannot be created in a document with origin 'null' and URL
How to perform redirects in NodeJS like a .htaccess file?
Maybe a better answer would be to ask this question: If your libraries never change, and you have a version update of your app, why would you force your users to re-download your libraries?
I am currently having a situation with my React app specifically in the development environment. I am currently creating a template for quickly building a react-landing-page. This obviously does not have redux but can be wired in if an individual finds the need for it.
Basically I'm running into an inconvenient "error" when wanting to build my project for production. I am forcing the developer to have to remove the bunlde.js script tag from src/index.html when building for prod, and in return they have to reimplement the script tag when wanting to work in dev. Now the app will still run in production, but you will receive a console log error if the script tag is not removed:
Now I know that I can remove my bundle.js script tag from src/index.html and have it injected through html-webpack-plugin, thus resolving the issue altogether. However, when I do that I run into a new issue. That issue being when/if I refresh the page on any other path besides root... for example: http://localhost:3000/about, it will return an empty page because bundle.js script only gets injected at the root level on page load. It does not on any other page.
Thus my question would be how to get hmtl-webpack-plugin to work in my dev environment so that I do not have to force an individual to manually put in and take out the bundle.js tag?
Take a look at the repo, maybe I am missing something here. Any suggestions or time helping me resolve this issue is greatly appreciated.
I am going to be working on an angular project without internet access, so my links to the cdn will not function. I would like to save the angularjs library to a folder inside of my project. Here is what I have tried:
I went to the cdn link, copied all of the text, pasted it into a file, and saved that file as angular.min.js . I then commented out the script tag for the cdn in my index.html file, and put in a new script tag specifying the path to the new saved file. When I open my project, I get the error "Uncaught ReferenceError: angular is not defined."
Here are the relevant pieces of my project's file/folder structure:
project
|_core
| |_public
| |_app
| |_index.html
|_libraries
|_angular.min.js
And here is my script tag:
<script src="./../../../libraries/angular.min.js"></script>
And here is the link to the cdn from which I copied the text:
https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js
Are you using a local webserver of any kind? Angular and many scripts need to be loaded from http and not file://. For this, you could use python's SimpleHTTPServer: python -m SimpleHTTPServer 8080 -- will open an http server on http://localhost:8080, open the url in your browser and you should be good to go. Also note that the order in which you load the scripts in your HTML is important, and Angular needs to be loaded before all modules of code that use it.
<script src="../../../libraries/angular.min.js"></script>
How about this ?
Have you just tried this?
<script src="/libraries/angular.min.js"></script>
Maybe your server start website (localhost:80) from the root of your project
You can use Grunt task to minify and concatenate all files. You can read the docs of GruntJS. Very useful.
http://gruntjs.com/sample-gruntfile
see the concatenate section.
if you do that manually you have check the sequence of lib files. Angularjs lib need to be on top.
There are chances of errors.
yes just to include a file you don't need Grunt
check in chrome inspect developer tool in network tab if your file angular.min.js loaded properly. If not you can change the path and try but if it is loading and still you are getting same error so please create jsfiddle or plunker of your file so that we can look it in detail.