I am running an angular application cloned from git. Found no errors on npm install and ng serve. But my Browser is showing me blank screen. I could see the error:
Failed to load resource: the server responded with a status of 404
(Not Found)
node_modules/#angular/material/prebuilt-themes/deeppurple-amber.css
Css file is available in the specified path.
My style.css includes:
#import "../node_modules/#angular/material/prebuilt-themes/deeppurple-amber.css";
I am new to angular...Please guide me to proceed.
From the documentation, in your styles.scss put :
#import "~#angular/material/prebuilt-themes/indigo-pink.css";
You have to replace ../node_modules/ by ~
Related
I tried to follow the tutorial of Angular with Dart.
Everything worked fine until I got to the navigation chapter.
When I run the project with webstorm and chromium I always get this error.
I also tried to run the solution repo but I get the same error.
It seems like these packages browser / angular etc. are not loaded.
Perhaps there are some restrictions by webstorm?! The funny thing is it worked occasionally on the first run but when I refreshed the page in the browser the error always comes back.
http://localhost:63342/toh-5-master/web/packages/browser/dart.js Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:63342/toh-5-master/web/packages/angular/angular.dart Failed to load resource: the server responded with a status of 404 (Not Found)
package:angular/angular.dart:1 An error occurred loading file: package:angular/angular.dart
http://localhost:63342/toh-5-master/web/packages/angular_router/angular_router.dart Failed to load resource: the server responded with a status of 404 (Not Found)
package:angular_router/angular_router.dart:1 An error occurred loading file: package:angular_router/angular_router.dart
http://localhost:63342/toh-5-master/web/packages/angular_tour_of_heroes/app_component.dart Failed to load resource: the server responded with a status of 404 (Not Found)
package:angular_tour_of_heroes/app_component.dart:1 An error occurred loading file: package:angular_tour_of_heroes/app_component.dart
EDIT
The things above are working now because I changed to this repo:
github.com/angular-examples/toh-5/tree/5-dev which works with Dart 2.
Right now I have another problem with the new 5-dev repo.
Here is my console of pub serve. It says the main.template.dart is missing.
(I'm using the Dart version 2.0.0-dev.44.0.)
Does anyone how to fix this problem??
Compiling angular_tour_of_heroes|web/main.dart...
[web] GET styles.css => (cached) angular_tour_of_heroes|web/styles.css
[Error from Dart2JS on angular_tour_of_heroes|web/main.dart]:
file:///C:/xampp/htdocs/flutterprojects/toh-5-5-dev/web/main.template.dart: Could not find asset angular_tour_of_heroes|web/main.template.dart.
[Info from Dart2JS]:
Took 0:00:03.911463 to compile angular_tour_of_heroes|web/main.dart.
Build completed with 1 errors.
[web] GET main.dart.js => Could not find asset angular_tour_of_heroes|web/main.dart.js.
[web] GET index.html => angular_tour_of_heroes|web/index.html
When I run it directly with the console I get the following error.
> pub serve --web-compiler=dartdevc
Build completed successfully
[web] GET => angular_tour_of_heroes|web/index.html
[web] GET styles.css => angular_tour_of_heroes|web/styles.css
Unable to find module for angular|lib/src/bootstrap/modules.template.dart
Unable to find module for angular|lib/src/bootstrap/modules.template.dart
Unable to find module for angular|lib/src/bootstrap/modules.template.dart
For Angular 4 example apps
Load failures like this can happen if you have an error in your app that is preventing dart2js from compiling it successfully. Are any errors or warnings being reported by pub in WebStorm's Pub Serve tab? Also make sure that you are using version 1.24.3 of the Dart SDK.
I'm unable to reproduce the problem you mention. I've downloaded the project zip, and it runs fine from both the command line and WebStorm (even after making some edits and refreshing). Note that the first time you load the app, you might get a 404 because pub might not have finished compiling your app yet.
For Angular 5 example apps
As you've found out, if you'd like to try out an example using Angular 5-alpha, switch to the 5-dev branch of the repo. Ensure that you are using at least a Dart 2-dev version of the SDK.
The Dart 2 SDK no longer has support for pub build and pub serve. As of 2018Q2 you cannot use WebStorm to build and serve Angular 5 apps. Instead, you'll need to do that from the command line:
pub run build_runner serve
Then open localhost:8080 in Chrome.
For the full details see the Angular 5 Setup for Development.
Angular 5 is nearly out. I can imagine that the TOH hasn't quite caught up. You can look at https://github.com/dart-lang/site-webdev.git to see the known issues.
When I run my Electron app through Visual Studio Code, the main process loads, which in turn launches the index.html page. In the index.js script I redirect the browser window to a local html file called startup.html, located in my scripts folder, which is just a sub folder of the app. The index.html page does not even launch and the app generates an error with the message:
Not allowed to load local resource
In the DevTools console it also shows the resource that it is attempting to load:
file:///usr/local/lib/node_modules/electron/dist/Electron.app/Contents/Resources/default_app.asar/scripts/ui/startup/startup.html
If I run npm start from my project's root folder, the app launches correctly and both the index.html and startup.html pages get loaded.
Visual Studio Code launches electron with:
/usr/local/bin/electron
This appears to be different than launching it with just npm start. Not sure what the difference is.
A side note: Before I added the code to launch startup.html, the app would run from Visual Studio Code. Only after adding startup.html does it not work.
What could be causing this?
I have a small electron app that loads the main.js and main.htm from an /app subfolder.
The main.js loads fine and the application creates a window:
let mainWindow = null
app.on('ready', () => {
console.log('Hello from Electron');
mainWindow = new BrowserWindow();
})
Then I added the code to load the main.htm file that is also located in the /app subfolder.
mainWindow.webContents.loadFile("main.htm")
However, I got the following error in the (chrome) console:
The error says,
"Not allowed to load local resource:"
That is a red herring. The error should say "cannot find local resource."
If I expand the path I finally see that it is attempting to load the main.htm file from the root directory of my project -- even though the main.js runs from the /app subfolder (which is where the main.htm file is found).
To fix the issue, I simply had to add the subfolder to the path it is was fixed:
mainWindow.webContents.loadFile("app/main.htm")
Most likely this error occurs because your path to the file is incorrect, not because of user rights or whatever.
if you add this line of code you will see the path that it considers the cwd (current working directory:
console.log(`${__dirname}`)
Here is how i solve this in my linux environment and windows environment
newWindow.loadFile(`${__dirname}/index.html`); //note Linux environment
newWindow.loadFile(`file://${__dirname}/index.html`) //windows environment
for me my folder structure is
|__app
| |__main.js
| |__renderer.js
| |__index.html
|__package.json
you can also use console.log(__dirname) to view your directory in console/terminal
Apparently something changed in the updated version of Electron that broke with the VS Code config settings. The documentation on how to configure VS Code has been updated at:
https://electronjs.org/docs/tutorial/debugging-main-process-vscode
So this issue may occur if we trying to manipulate the contents of the page without completely loading the page. So any manipulations must be done after loading the page gracefully(after ready-to-show event).
I also got the same issue i placed the below line before loading the file.
window.webContents.openDevTools()
Example Code
// Issue code
window = new BrowserWindow({width:800,height:600,parent:mainWindow})
window.webContents.openDevTools()
window.loadURL(url.format({
pathname: path.join(__dirname,'/../views/file.html'),
protocol: 'file',
slashes: true
}))
// Issue Solved code
window = new BrowserWindow({width:800,height:600,parent:mainWindow})
window.loadURL(url.format({
pathname: path.join(__dirname,'/../views/file.html'),
protocol: 'file',
slashes: true
}))
window.webContents.openDevTools()
can anyone run phonegap-app-developer with cordova-plugin-wkwebview-engine?
this is my environment:
phonegap: 6.3.0
cordova-plugin-wkwebview-engine: 1.0.3
cordova-labs-local-webserver: from https://git-wip-us.apache.org/repos/asf/cordova-plugins.git#master:local-webserver
I use webpack dev server to download assets, and I think I configure it to return CORS header already (Access-Control-Allow-Origin: *).
under such a circumstance, I try to run phonegap-app-developer with cordova-plugin-wkwebview-engine. for the first time with this instruction. but got following error, which seems to described in here.
2016-08-16 16:50:01.026 PhoneGap[456:87484] Copying Cordova Assets
2016-08-16 16:50:01.026 PhoneGap[456:87484] Found /www folder. Will copy Cordova assets to it.
Received an unexpected URL from the web process: 'file:///var/mobile/Containers/Data/Application/...snip.../Library/NoCloud/phonegapdevapp/www/index.html'
Received an invalid message "WebPageProxy.DecidePolicyForNavigationAction" from the web process.
then I find this article, do the same with phonegap command (instead of ionic). as a result, above error is gone. but still phonegap-app-developer shows white screen.
official repository still does not use wkwebview plugin, so I doubt it does not work with developer app.
Since I upgraded to Dart 1.9.1 whenever I try to run my main.dart by clicking in Run in Dartium or Run as JavaScript I get this error on the browsers console
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:8080/main.dart
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:8080/main.dart.js
I tried running my own bin/server.dart so I didn't rely on the pub server to serve my static files. From this script, the directions to reach the web folder usually where "../web", I had to change this to just "web" in order for this to work.
Was there a change I am not aware? Is this a bug?
Edit
I also get this message on Dartium
You are using an unsupported command-line flag: --no-sandbox. Stability and security will suffer.
Update
The directory problem might be because of a change an update in Shelf or Redstone. I did a pub update as suggested and that might have changed the way the framework looked for folders.
The problem seems to be that you're trying to run an application (server-side) as a website.
If you press the icon next to the run icon and in the dropdown menu click on "Manage launches" you can click the left of the icons (the server-icon) which allows you to run a CommandLine application.
If you select your dart script here (server.dart or main.dart) you'll be able to use it.
So I've been working on this project in Dart for a few months without too many big issues, until a recent update from last week seems to have broken the way libraries are included in my application. I have an application package called 'BeerRun', with the standard lib/ and web/ directories. In 'web' I have the main beer_run.dart file, which is included and invoked in web/BeerRun.html. I've run pub install and pub update, but then when I run my dart application, I see the following error:
Failed to load resource: the server responded with a status of 404 (Not Found)
http://127.0.0.1:3030/home/kyle/dart/BeerRun/web/packages/beerrun/src/input/keyboard_input_component.dart
Failed to load a file package:beerrun/src/input/keyboard_input_component.dart
There are about twenty instances of this message referencing different dart source files. The problem is that the path should be /home/kyle/dart/BeerRun/web/packages/BeerRun/src/input, but the browser is using all lower case path names to include this file. This was not a problem last week, until I upgraded my Dart editor; it is now version 22223. Is there something I'm missing?
Thanks in advance!
Failed to load resource: the server responded with a status of 404 (Not Found)
http://127.0.0.1:3030/home/axl/workspace/dart/Test/web/packages/test/text.dart
I had the same problem, solution was to include library through:
import '../lib/text.dart';
instead of
import 'package:Test/test.dart'
Version info: Dart Editor/SDK version 0.6.19_r26297