I'm getting the following error:
NodeInvocationException: Prerendering failed because of error: ReferenceError: window is not defined
I have followed the following documentation from microsoft themselves:
https://learn.microsoft.com/nl-nl/aspnet/core/client-side/spa/angular?view=aspnetcore-2.0&tabs=visual-studio
So the prerendering gets triggered but it fails because on the server side window does not exist ofcourse.
Now i have seen fixes for the older angular template from Visual Studio which came with Angular 4. The one from the documentation has Angular 5 and is build up a little different. So I have found fixes but they do not work because I do not have an index.cshtml. In the new template you get a normal index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test/title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script src="https://use.fontawesome.com/93acba991a.js"></script>
</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>
The solution for the first project was :
replace the "asp-prerender-module" with "asp-ng2-prerender-module"
As you can see i do not have a asp-prerender-module in there, and changing it to "asp-ng2-prerender-module" does not work for me. I'm using the #agm/core package which gives me this error, but i heard multiple packages suffer from this problem. I hope anyone has a fix for this issue.
Related
I am trying to Bundle Bigcommerce Theme but I am getting this kind of error. I tried deleting the line but another one will appear from a different file. I have tried following the recommendation
npm install --use-old-node-sass-fork.
but it didn't work and I keep getting the same error
Error: ".visually-hidden" failed to #extend "%visually-hidden".
The selector "%visually-hidden" was not found.
Use "#extend %visually-hidden !optional" if the extend should be able to fail.
on line 22 of base/base.scss
>> #extend %visually-hidden;
----------^
:
---------WARNING---------
We are currently in the process of deprecating node-sass fork
https://github.com/bigcommerce-labs/node-sass
Your scss files were compiled using latest node-sass version
https://github.com/sass/node-sass
This error might indicate that your scss file is not compatible with it.
There is still an option to compile scss file old fork by using --use-old-node-sass-fork.
But note, that this will lead to 500 error in production in near future.
---------WARNING---------
I saw a thread that " I had to just upgrade my bootstrap version in Base.html file and the error was solved." but I do not have that on the theme that I am using
<head>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>{{head.title}}</title>
{{{head.meta_tags}}}
{{{head.config}}}
<link href="{{head.favicon}}" rel="shortcut icon">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script>document.documentElement.className = document.documentElement.className.replace(/\bno-js\b/,'js');</script>
{{> components/common/polyfill-script }}
{{!-- Load Lazysizes script ASAP so images will appear --}}
<script>
{{!-- Only load visible elements until the onload event fires,
after which preload nearby elements. --}}
window.lazySizesConfig = window.lazySizesConfig || {};
window.lazySizesConfig.loadMode = 1;
</script>
<script async src="{{cdn 'assets/dist/theme-bundle.head_async.js'}}"></script>
{{{stylesheet '/assets/css/theme.css'}}}
{{ getFontsCollection }}
{{{head.scripts}}}
{{{head.rsslinks}}}
{{inject 'themeImageSizes' theme_images}}
{{> components/common/global-injects}}
{{{snippet 'html_head'}}}
{{> core/structured-data/website}}
</head>
I run both the vue and the django.
I have installed webpack_loader and have it in installed apps.
I have the WEBPACK_LOADER in settings.py
WEBPACK_LOADER = {
'DEFAULT': {
'BUNDLE_DIR_NAME': 'dist/',
'STATS_FILE': os.path.join(BASE_DIR, 'frontend', 'webpack-stats.json'),
}
}
frontend is the name when creating vue.
Here is some more details KeyError at / 'assets' and ModuleNotFoundError: No module named 'webpack_loader'
My page source from http://localhost:8000/ looks like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QuestionTime</title>
</head>
<body>
<h1>Vue JS</h1>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<script type="text/javascript" src="http://0.0.0.0:8080/bundle.js" ></script>
</body>
</html>
My page source from http://localhost:8080/ looks like this
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="/favicon.ico">
<title>hello-vue</title>
<link href="/js/about.js" rel="prefetch"><link href="/js/app.js" rel="preload" as="script"><link href="/js/chunk-vendors.js" rel="preload" as="script"></head>
<body>
<noscript>
<strong>We're sorry but hello-vue doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<script type="text/javascript" src="/js/chunk-vendors.js"></script><script type="text/javascript" src="/js/app.js"></script></body>
</html>
When I use (django-webpack-loader 1.0.0), I get KeyError at /
When I use (django_webpack-loader 0.7.0), I get no errors, but the vue code doesn't show up (But I see it at localhost:8080).
Just started to work Today, I didn't do anything, and it started to work. I tried 2 times to make a new project with the same code, downloaded all the stuff again.
Didn't work. But then my vue code suddenly stopped working. I turned the server on and off. And then I saw that my vue code had been updated.
I then went to localhost:8000 to see if it worked, and it did.
I believe that God fixed it. Not sure what else it would be.
EDIT: 8 July 2022
I happened to get the error: TypeError: expected string or bytes-like object.
It was point to {% render_bundle 'chunk-vendors' %}
The problem was that I had upgraded the django-webpack-loader to the latest version, the error went away when I use this version django-webpack-loader==0.6.0.
I tried django-webpack-loader==0.7.0 and it works as well.
The version of webpack-bundle-tracker I'm using is 0.4.3
I want want to create an index.jsp file instead of index.html while doing production build. This weird requirement is for capturing the header part which we will getting from other Oracle Authentication Manager so I want load my appliation from index.jsp. My index.jsp should look something like this
<%# page language="java" import="java.util.*" session="true" %>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CardEncryption</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="styles.3ff695c00d717f2d2a11.css"></head>
<body>
<app-root></app-root>
<script type="text/javascript" src="runtime.06daa30a2963fa413676.js"></script><script type="text/javascript" src="polyfills.9a8743e2009b1e7b1fbd.js"></script><script type="text/javascript" src="main.dcf4ad6dff6130812df3.js"></script></body>
</html>
Any suggestion to do this.
I suppose you only want the index.jsp when doing the production build. The development process should still use index.html
In that case you should
Create a index.jsp file in the same directory as your index.html file (so you have both).
Update your angular.json file's production configuration by adding an index property to your production configuration like this:
That will make sure that it uses index.jsp when you build with --prod, but still uses index.html for development.
The project is done on MVC5, and when i publish the project through visual studio on azure, the images and css effects cannot be done. I did try through the Bundling.config but still cannot get it done. i have an img folder inside Content (it has all the images).
I have the following in my bundle config file:
bundles.Add(new StyleBundle("~/Content/img").Include(
"~/Content/bootstrap.css",
"~/Content/site.css",
"~/Content/base.css",
"~/Content/parallaxstyle.css",
"~/Content/bootstrap.css",
"~/Content/pricing.css",
"~/Content/pricing2.css"));
and in view:
#Scripts.Render("~/Content/img")
But it doesn't even render the css files.
This is the root.
The layout view:
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Styles.Render("~/Content/img/demo/_small")
#Scripts.Render("~/bundles/modernizr")
#Styles.Render("~/Content/bootstrap.css")
#Styles.Render("~/Content/base.css")
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Josefin+Slab">
<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
</head>
<body>
That's because you created a StyleBundle, and are trying to render a ScriptBundle.
Change this:
#Scripts.Render("~/Content/img")
To this:
#Styles.Render("~/Content/img")
Note that if you have an actual folder at ~/Content/img, consider changing the name of the bundle so that there is no name clash.
I have a polymer 0.10+ web app that works in Dartium (Dart VM) and worked until Polymer 0.10.0-pre.12.
When I compile it to JS (Pub Build) and run it as JS under Google Chrome, my polymer (big) component doesn't appear and I have this message in console :
"Resource interpreted as Script but transferred with MIME type application/dart: "127.0.0.1:8080/cvwebkit.html_bootstrap.dart". cvwebkit.html:295"
line 295 : <script type="application/dart" src="cvwebkit.html_bootstrap.dart"></script></body></html>
When I change this line to <script src="cvwebkit.html_bootstrap.dart.js"></script></body></html> in cvwebkit.html in the build directory, it works.
When I launch directly the modified file, I have this url and it works (at least partially) 127.0.0.1:3030/CVWebkit/WebApp/build/web/cvwebkit.html
When I launch normally the "dev" file as JS, I have the above issue with this url : 127.0.0.1:8080/cvwebkit.html
My "head" :
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CVWebKit</title>
<link rel="stylesheet" href="cvwebkit.css">
<link rel="import" href="packages/polymer/polymer.html">
<link rel="import" href="imgdyn.html"> <!--to ensure dynamic assets are created by polymer, so that there is no attempt first by the browser-->
<link rel="import" href="cvwebkitscript.html"> <!--needed to include the link to the dart script as we can't use both "src" and "export" in the script line-->
<link rel="import" href="zone-ruban.html">
<script type="application/dart">export 'package:polymer/init.dart';</script>
</head>
Any idea ?