I have a nice html, css template (source code here).
I am going to use this template in my angular2 app (source code here).
I got the html template out of this repository (index.html).
My problem is in the angular2 source code
You need to clone the angular source.
Run npm install
Run ng serve
Unfortunatly, it seems that the <script src="assets/js/main.js"></script> in index.html is not added properly. Although, there is no error in the console, the left menu is broken. I know that this problem occurs when main.js is not fit.
Here is the correct html page:
Here is the angular page (broken header and menu):
The codes are identical, but I have decomposed the html template into 3 components (header, menu, and app (main content)).
Instead of trying to figure out what happened with your CSS, I took the original template, converted it to Angular 2 with the angular-cli, and fixed the CSS issues. It all works now, and the complete source is at https://github.com/Boyan-Kostadinov/angular2-miminium
When you broke apart index.html it's likely that you also altered some file paths.
The relative path would go from src="assets/js/main.js" to something like src="../assets/js/main.js".
Prepending ../ to the path will back out of the current directory to the next level up. As you have it now, the browser is looking for the assets directory in what I assume you have compartmentalized as an htmlComponents directory.
Consider using the absolute path to main.js, at least to diagnose the issue.
I ran into a similar issue with the same file. In my case, I have a complicated application that is developed in stages. I installed my Angular seed in a subdirectory. Because of my file structure, when I run npm start, the live server that is started has bad relative link locations. For example, in the screen shot below, you will see that the application is trying to find style.css at http://localhost:3000/medface/RecordWriter/styles.css; however, it should be looking at http://localhost:3000/styles.css, because the root of the web server that was created by npm start is at /medface/RecordWriter/.
With respect to your project. The key to finding the problem with your link is to open the developer panel and inspect the actual network request. If you share a screen shot, we may be able to help you inspect your instance with more insight.
What Worked for Me
In my case, I reconfigured my local web server to handle any unserved pages in the Angular2 folder and return the index instead. When I run npm start, I close the browser page that opens and use my regular web server. Instead of viewing my application on localhost:3000, I view my application at localhost/medface/RecordWriter/ (which is equivalent to localhost:80/medface/RecordWriter).
The down side to my makeshift approach is that the page must be refreshed before changes appear, but it loads all resources predictably and reliably, and allows my Angular2 code to run in conjunction with some of the older code base in other areas of the website that have not been converted to Angular2. Regardless, this may work for you also.
Related
I am experiencing something in production which isn't reproducible locally.
The Link from nextjs (version 12.3.x) works well in development and when running the build in production mode locally, meaning that the navigation happens without a full page reload. But when deployed with terraform, all Link components are causing a full page reload. Everything else works as expected.
I have a mixture of Link children across the application, sometime it's a, but other times it's a button or simply a div or span. In every case, the full page refresh happens. That's why I suspect it must be something related with the configuration rather than the Link usage, however I am not sure where to start debugging and I am looking for a hint in the right direction.
Back with an answer to this. In my case, nothing was wrong with the Link components itself, nor with the build. The problem was with a path rewrite in our terraform configuration (it was rewriting everything in /_next/*).
It appears that getServerSideProps fetches JSON files which will be used to render the page Their paths were being re-written and causing a 403 error, which made the page reload instead of allowing me to navigate seamlessly as I am used to with next.
This problem was very specific to my configuration, but my general recommendation is to check whether you are rewriting any path of the json files created by next at navigation, in case you are experiencing the same problem only on staging/production.
In my dev environment the site looks as expected, however when I run gatsby build my CSS does not display properly. If I manually navigate to another page then the CSS displays as expected.
There are no errors but I do get this warning:
The resource
http://localhost:9000/static/d/520/path---offline-plugin-app-shell-fallback-a-30-c5a-NZuapzHg3X9TaN1iIixfv1W23E.json
was preloaded using link preload but not used within a few seconds
from the window's load event. Please make sure it has an appropriate
as value and it is preloaded intentionally.
When I inspect that file it shows:
{"pageContext":{}}
The fact that that object is empty is my issue I assume. I have tried disabling the service worker but that only made the issue worse.
I've also tried
forcing a build and disabling the cache on netlify,
deleting npm and package.json files and then running npm build,
but no luck so far.
This could be related to the fact that main component e.g Layout unmounts and remounts on every page.
Try to refer your css files in gatsby-browser.js file which is provided by default and is located in the root of your project.
For example you could try do following:
// gatsby-browser.js
require('./my-global-styles.css')
It'll also work with gatsby-plugin-sass
// gatsby-browser.js
import './src/styles/my-global-styles.scss'
For more info visit: https://www.gatsbyjs.org/docs/browser-apis/
I have the same issue. In my case, gatsby-plugin-styled-components was missing in my gatsby-config.js.
https://www.gatsbyjs.org/packages/gatsby-plugin-styled-components/
https://github.com/gatsbyjs/gatsby/issues/8984
I am trying to get my Dart Polymer 1.0 single page app working with pushState. I have set up nginx to route all requests to the dev server which runs when executing pub serve. Nginx also takes care of always requesting index.html instead of the real url.
The problem I am facing is that as soon as I load a url with at least one folder, the js cannot be loaded anymore.
Example
Requesting project.local loads the index.html file and works fine. The same is true for project.local/test. As soon as I try going to project.local/test/something, it stops working because the file index.bootstrap.initialize.dart is requested from project.local/test/index.bootstrap.initialize.dart and not from project.local/index.bootstrap.initialize.dart.
Source code
The whole project can be found at https://github.com/agileaddicts/blitzlicht. The index.html is where the magic happens.
How do I tell the transformer to put absolute urls into the html instead of relative ones?
you should by able to upgrade to the last version of polymer by changing the version of reflectable.
reflectable: >=0.5.0
and perhaps add this in you pubspec
- $dart2js:
$include: '**/*.bootstrap.initialize.dart'
I'm having a problem using Vaadin (in Eclipse) and its associated styling engine Valo, and the TouchKit package. I mention all of these because I'm not sure which, if any, is causing the problem. The name of my custom theme (which imports Valo) is simply "touchkit".
I have the project running on a Tomcat server on localhost and accessible in my browser. I wanted to tweak some of the CSS so I edited the appropriate file WebContent/VAADIN/themes/touchkit/touchkit.scss. After editing this file, I recompile the theme and see the appropriate changes in the generated file styles.css. Then I go to load up the application in my browser, and things get weird.
I can load the page and, using Chrome's developer tools, see that the page requests styles.css for download, as expected. It gets a 200 OK response from the server, but when I view styles.css, it contains just a single \n. This is also true in Safari. Even using cURL to download styles.css yields the same result. In the Eclipse editor, and when I inspect it in the terminal, styles.css is ~12,000 lines long. Why can't my browser or cURL get that data?
I can view similar project demos on Vaadin's own site and the stylesheet (which should be almost identical to mine) is loaded correctly. Also, other Vaadin projects on my localhost server have their stylesheets loaded correctly (though they do not use Valo). Compiling the theme in Eclipse yields no errors. Because the issue presents itself across a variety of graphical and non-graphical clients, I'm starting to think the issue is with Tomcat. But I can get to the directory from which Tomcat serves files and styles.css is correct in that folder too. There's no apparent reason that Tomcat would be serving a blank file.
You may have guessed from the description, but I'm working on a Mac. Any help is appreciated!
PS Mods - I also asked this question over at Superuser since it wasn't 100% a programming question. However, I'm new at Superuser and couldn't create tags for Vaadin or Valo, so I'm asking here where there might be a better chance of getting an answer.
Hard to say, since your are doing everything fine. My best bet would be the tomcat implementation you are using, maybe there's something weird there. Try upgrading to latest if it's not or to a previous version.
FYI I'm using Tomcat 7.0.55.
PS: your attempts are in run/debug from eclipse or have you made a .war form the project and deployed it with the Tomcat-Manager?
Regards
add below to your gwt.xml, and touchkit is not valo aware see https://vaadin.com/forum/#!/thread/8264224/8264223
<set-configuration-property
name='touchkit.manifestlinker.additionalCacheRoot'
value='src/main/webapp/VAADIN/themes/MyTheme:../../../VAADIN/themes/MyTheme' />
I'm currently viewing Codekit's preview link of my page in the browser. After saving changes to my CSS, Codekit will auto-refresh the browser and render the changes as expected - the first time only.
After saving another change to the CSS, Codekit fails to refresh the browser the second time. I suspect this has to do with the structure of my files in conjunction with my external server (MAMP).
Currently I've specified my the following as External Server Address http://localhost/
And have set the following as my Preview Subpath: /sw/?v=/car/create
Could it be, that only files in the document root auto-refresh every time changes are made but not those in the Preview Subpath?
Thanks in advance for any help!
I have weird CodeKit2 behavior too: any project autorefreshes fine when I put it to the ~/Desktop/myproject but fails to reload when I put it to the ~/Dropbox/oluckyman-air/Projects/Work/myproject folder.
Seems that length of the project path is affects the autoreload feature.
I had workaround this problem by moving my project to the ~/Projects/myproject folder.
Update:
As Bryan Jones says it’s actually a bug in OS X. See here for a list of ways to work around it: http://feedback.livereload.com/knowledgebase/articles/86239-os-x-fsevents-bug-may-prevent-monitoring-of-certai