I know there are many solutions available to this question and some solutions don't fit angular and some solutions not working. I am following this blog to achieve the add to Homescreen feature and I did exactly what is there in that blog and I got the error Failed to register a ServiceWorker for scope ('http://localhost:3000/') with the script ('http://localhost:3000/service-worker.js'): The script has an unsupported MIME type ('text/html'). and then I tried moving the service-worker.js to app folder and got the same error. I have created service-worker.js in the src folder and script mentioned in the blog posted in index.html. I am working on this for 2 days. any help is very much appreciated. thank you
I moved the service-worker.js to the assets folder and changed the path navigator.serviceWorker.register('/assets/service-worker.js'). it worked !!
Related
I am working through the Odin Project and am stuck on the first lesson where we must build a webapp using webpack. I followed the tutorials here and hereon webpack's website, and I was able to get them to work. However, when I try to set up my own files to build my own project, I can't get CSS to load or a function in my index.js file.
I have the same directory style set up, and have even tried using the exact same index.js file they use in the tutorial.
I expect to get: a webpage to load that says "hello webpack" in red text.
Instead, I get this error: when I run $npx webpack, it says:
ERROR in ./src/style.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> .hello{
| color: red;
| }
# ./src/index.js 1:0-21
Upon googling the error, I found a stack overflow article and I tried renaming my rules array to 'loaders' in my .config file as this article suggests, but I still get the same error.
“You may need an appropriate loader to handle this file type” with Webpack and CSS
Also weird is the fact that some of the code in my index.js file works, and some does not. To elaborate, my console.log and alert works just fine after I run $npx webpack and load the page. However, they function that is supposed to add "hello webpack" to the DOM, does not, as evidence by the fact that nothing shows up at all. The page itself is blank.
My index.js code:
import './style.css';
console.log("console works");
alert("alert works");
function component() {
const element = document.createElement('div');
// Lodash, now imported by this script
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
element.classList.add('hello');
return element;
}
document.body.appendChild(component());
You will notice that it is nearly the exact same as the asset management index.js file from the webpack tutorial. I did this purposely to have as little variance as possible between my stuff and the tutorial.
I don't know if it is too much information, but a link to the whole repo as it currently is set up can be found here
Update:
I re-setup the file from the ground up and noticed that the CSS stopped working when I went out of my way to change the bundle.js link they had in their example to main.js. While I double-checked to make sure that I made the correct corresponding changes to output in my config file, making this change had the sum total outcome of not allowing my CSS to work for some reason.
What this reason is? I have no idea, and would be very interested to learn why this happened if someone has a suggestion
But on the offchance that one of my fellow Odin learners googles this problem, I kept the example's bundle.js instead of changing to main.js as my output script and it worked fine.
I'm going to update my github now so my original github link will likely be out of date going forward.
Going through your GitHub repo commit history, I see that at some point you named your Webpack configuration file weback.config.js instead of webpack.config.js (the p was missing). This was likely the source of the problem, as Webpack couldn't find a loader configuration for the .css file you're importing.
Stack: Webpack 4.16.0, Node8, Vuejs2
I am seeing the below error, whilst serving my Vuejs application.
Error: Loading chunk 4 failed.
(missing: https://myapp.com/ui.chunk.bundle.js)
at HTMLScriptElement.s (demo:1)
This error is consistent across builds, the actual file itself is accesible via the URL.
I am using code splitting via import() and the initial app loads fine, but then the flow will break when another chunk is loaded, it can also vary between ui.chunk.bundle.js & vendors~ui.chunk.bundle.js.
When building for production, a new error is shown, but it seems related as also linked to loading modules:
demo:1 TypeError: Cannot read property 'call' of undefined
at o (demo:1)
at Object.349 (ui.chunk.bundle.js:1)
at o (demo:1)
at o.t (demo:1)
I have tried upgrading webpack and babel, but am at a loss as to what this could be down to as it was working perfectly fine before.
When running the application on my local machine and not Google App Engine, everything seems fine.
How the app is loaded:
It is loaded into other website via a script tag, so domainA.com runs the script tag which calls myapp.com/js and the flow begins, i.e the app loads various chunks based on some logic.
When accessing the webpack generated index page bundle at myapp.com everything loads correctly.
Please help!
That is rather deep and surely not easily fixed in two steps, best you create a new project using cli, if convenient with recommended presets, and if it still persist check the npm packages you installed and make sure none of them are discontinued and are up-to-date at least according to your version of vue.
Its might be due to "webpack.config.js" where you can just try with updating output object
module.exports = {
output: {
chunkFilename: '[id].chunk.[chunkhash].js',
}
};
Hope it should work!
This might be a cross site scripting problem.
Make sure that myapp.com sets the correct headers.
On myapp.com, set this header:
Access-Control-Allow-Origin: https://domainA.com
You should also make sure, that your script tag has async set to false:
<script async="false" …
I have a django(1.6.11) project running perfectly fine. I want to use it with Angular2. So, I have been following this example. I am getting the following error on localhost:8000 page. By the way it shows Cannot GET / in localhost:3000.
Error: Zone$1http://localhost:8000/ng/node_modules/zone.js/dist/zone.js:232:1
Zone$1http://localhost:8000/ng/node_modules/zone.js/dist/zone.js:114:17
scheduleResolveOrReject/<#http://localhost:8000/ng/node_modules/zone.js/dist/zone.js:502:78
Zone$1http://localhost:8000/ng/node_modules/zone.js/dist/zone.js:265:1
Zone$1http://localhost:8000/ng/node_modules/zone.js/dist/zone.js:154:21
drainMicroTaskQueue#http://localhost:8000/ng/node_modules/zone.js/dist/zone.js:401:25
ZoneTask/this.invoke#http://localhost:8000/ng/node_modules/zone.js/dist/zone.js:339:25
Evaluating http://localhost:8000/ng/src/main.js Error loading
http://localhost:8000/ng/src/main.js localhost:8000:25
Following a suggestion for a question on stackoverflow, I changed loading long-stack-trace-zone.js instead of zone.js in my index.html code. But this says, Zone is not defined. Is this some version compatibility issue? I am using npm 4.1.1 and node v4.8.3. Please do comment if I need to show any of my files.
I'm getting an error about Application.js not being found once I've copied the application over to a web server.
http://site/app/Application.js?_dc=1404504339794 404 (Not Found)
But obviously, this is wrong since once you run sencha app build everything is minified to app.js.
I looked at the generated app.js and index.html and there is no mention of Application.js anywhere.
I'm running: sencha app build production and copying the content of the production build over.
I am also getting a C1009: Circular reference warning during the build. And here it is:
in /controller/MainContent.js at line 192
var w = Ext.widget('EditPortalUserWindow'); //this creates a widget defined in the MainContent.js VIEW
And within that view at some point in one of the widgets, I use this to define the URL of a form:
url: GlobalVars.contactPostApiUrl //if I comment this out, the warning goes away...
GlobalVars is defined in app.js
Ext.define('GlobalVars', {
singleton: true,
contactPostApiUrl: 'http://site/CustomerPortal.WebAPI/api/contact/post'
});
I want GlobalVars to be available from everywhere, which is why I put it in app.js.
Any ideas ? Thank you!
I have seen something similar already - the production build requiring files it shouldn't. The following should help:
run the development version and see if you get any synchronous loading warning, fix if yes.
run sencha app build --clean
If it does not help run this sequence
sencha ant clean
sencha app refresh
sencha app build
#Francis Ducharme Adding to the above coversation , i m sending u two links which i guess might help u with C1009 .
C1009 Link 1
C1009 Link 2
I "solved" this issue by actually creating the file it is looking for (an empty one) and this seems to work. Although I feel a bit uncomfortable with this fix.
I'm getting an error logged to the console:
GET http://localhost:3000/js/lib/angular/MINERR_ASSET 404 (Not Found)
I saw this post and it said it was a result of not inculding ngRoute module, but I do!
public/js/app.js:
window.app = angular.module('mean-blog-seed', ['ngCookies', 'ngResource', 'ui.bootstrap', 'ngRoute', 'mean-blog-seed.controllers', 'mean-blog-seed.services']);
Then I have a jade file that references angular-route.js:
script(type='text/javascript', src='js/lib/angular/angular.min.js')
script(type='text/javascript', src='js/lib/angular-route/angular-route.min.js')
script(type='text/javascript', src='js/lib/angular-cookies/angular-cookies.min.js')
script(type='text/javascript', src='js/lib/angular-resource/angular-resource.min.js')
script(type='text/javascript', src='js/lib/angular-bootstrap/ui-bootstrap-tpls.min.js')
script(src='js/app.js')
script(src='js/config.js')
script(src='js/services/global.js')
script(src='js/controllers/posts.js')
script(src='js/controllers/header.js')
script(src='js/filters.js')
script(src='js/directives.js')
The repo is here
Update:
I posted the issue on github and got referenced to this crazy answer: https://github.com/angular/angular.js/issues/4675
The ng-closure-runner runs an angular specific pass during compilation
which adds a definition for MINERR_ASSET, that asset is not included
with any of the 1.2.x releases (the only releases with source maps).
However, the source map references MINERR_ASSET as a source and as a
result there is a 404 when requesting the file.
I've only quickly glanced at the grunt tasks and also
ng-closure-runner, but I'm under the impression this is likely the
ng-closure-runner included minErr.js or some file generated based on
it. Either way the correct asset should be packaged with the other
source files or MINERR_ASSET should be removed from the source map
"sources".
https://github.com/angular/angular.js/issues/4675
The above code led me to check out that problem and you are getting a call to ng-closure-runner (here: https://github.com/angular/angular.js/blob/a29bff1c98161495fb304d0195c4d2916b357686/bower.json).
Try including minErr.js in your JS files.
Recently I noticed that in Safari I was getting the same error.
"sources":["angular.js","MINERR_ASSET"]
to:
"sources":["angular.js"]
and added non minified version of angularjs files associated with minified version to fixed the console errors. If you are using production version of angularjs, which should be minified version, make sure you add map associated with the library files or you may have unwanted server errors.
in the .map file, I changed
"sources":["angular.js","MINERR_ASSET"],
to :
"sources":["angular-sanitize.js"]
no longer getting error in console.
I also faced this issue once, make sure you have all three files :
angular-route.js
angular-route.min.js
angular-route.min.js.map
in your library/vendor folder.
and your app definition contains ngRoute :
var myApp = angular.module('myApp',['ngRoute']);
Please vote if this resolution helps you. or share your app.js/error if you still have this issue.
Thanks