in my app.component.html
I have tried this
<img src="/assets/icon.png" >
I have also tried
<img src="assets/icon.png" >
in my assets folder i've copied the icon.png
in angular-cli.json
"assets": ["assets", "favicon.ico" ],
and in index.html
<base href="/">
I run ng serve from the command line
in chrome console
I'm getting this error
Failed to load resource: the server responded with a status of 404 icon.png
(Not Found)
I run ng build
the dist folder does not contain any assets it starts with index.html and ends with vendor.bundle.js.map
Related
I have seen a question with a very similar title on SO from 3 months ago but it has no answers.
After a fresh laravel 9 installation what are the minimum steps to put the laravel application into it's own directory, and also modify the public directory name? It would be handy to have a step by step guide with laravel 9 specific one as I can't seem to find one anywhere.
eg. the following root directory structure:
laravel-app/ (contains all laravel files like resources/ and storage/)
public_html/ (contains index.php and /js etc)
Using the old process (similar to this https://github.com/hannanstd/change-laravel-public) I have always used no longer works, and this seems to have something to do with vite that laravel 9 uses instead of laravel-mix. It works up to the point of running php artisan serve but fails when running npm run dev with vite. Giving this error:
$ npm run dev
> dev
> vite
(!) Could not auto-determine entry point from rollupOptions or html files and there are no explicit optimizeDeps.include patterns. Skipping dependency
pre-bundling.
node:internal/fs/utils:347
throw err;
^
Error: ENOENT: no such file or directory, open 'public\hot'
at Object.openSync (node:fs:594:3)
at Object.writeFileSync (node:fs:2207:35)
at Server.<anonymous> (D:\Websites\laravel9-admin\laravel-core\node_modules\laravel-vite-plugin\dist\index.js:122:34)
at Object.onceWrapper (node:events:627:28)
at Server.emit (node:events:525:35)
at emitListeningNT (node:net:1466:10)
at processTicksAndRejections (node:internal/process/task_queues:82:21) {
errno: -4058,
syscall: 'open',
code: 'ENOENT',
path: 'public\\hot'
}
So it seems that yet somewhere else the default "public/" is defined, but after searching with ctrl+shift+F in my project it doesn't seem to be anywhere that matters so really unsure where it's getting it from. Any help is highly appreciated, but really a step by step guide on how to achieve this for Laravel 9 is the end goal so it can be a reference for myself and other users with the same problem :)
Answering this myself as found the solution!
First Option: Just rename the public/ directory, for laravel 9:
Rename public folder to public_html (or any desired name)
Edit AppServiceProviver.php and add below code in register method:
$this->app->bind('path.public', function() {
return realpath(base_path().'/public_html');
});
Add publicDirectory: 'public_html' to laravel-core/vite.config.js within the plugins / laravel object, eg.
export default defineConfig({
plugins: [
laravel({
publicDirectory: 'public_html',
input: [
'resources/sass/app.scss',
'resources/js/app.js',
],
refresh: true,
}),
],
});
Second option: Seperate out the laravel core files into their own directory and also rename the public/ directory, for laravel 9:
Rename public folder to public_html (or any desired name)
Create a laravel-core directory and move all files and folders except public_html into the laravel-core folder.
Edit index.php in public_html folder and find/replace __DIR__.'/../ with __DIR__.'/../laravel-core/ (3 cases)
Edit AppServiceProviver.php and add below code in register method:
$this->app->bind('path.public', function() {
return realpath(base_path().'/../public_html');
});
Add publicDirectory: 'public_html' to laravel-core/vite.config.js within the plugins / laravel object, eg.
export default defineConfig({
plugins: [
laravel({
publicDirectory: '../public_html',
input: [
'resources/sass/app.scss',
'resources/js/app.js',
],
refresh: true,
}),
],
});
After running the yarn build getting the dist folder. While running the index.html I am getting the white blank page.
File structure:-
:~/Desktop/web$ ls
babel.config.js docs node_modules public src yarn.lock
dist log package.json README.md vue.config.js
vue.config.js
module.exports = {
publicPath: "./",
chainWebpack: config => {
config.plugins.delete('prefetch');
},
devServer: {
host: 'localhost',
https: false,
port: 8080,
public: 'localhost'
},
}
Web Page Output:-
Console Output:-
OneSignalError.js:18 Uncaught (in promise) f: OneSignal: This web push config can only be used on https://example.com. Your current origin is http://localhost:8080.
at Function.checkRestrictedOrigin (https://cdn.onesignal.com/sdks/OneSignalPageSDKES6.js?v=151508:1:243516)
at Function.<anonymous> (https://cdn.onesignal.com/sdks/OneSignalPageSDKES6.js?v=151508:1:243076)
at Generator.next (<anonymous>)
at r (https://cdn.onesignal.com/sdks/OneSignalPageSDKES6.js?v=151508:1:716)
GET http://localhost:8080/sockjs-node/info?t=1632898657676 net::ERR_CONNECTION_REFUSED
GET http://localhost:8080/sockjs-node/info?t=1632898659676 net::ERR_CONNECTION_REFUSED
GET http://localhost:8080/sockjs-node/info?t=1632898662675 net::ERR_CONNECTION_REFUSED
The problem is that you are testing OneSignal with your local server from Vue, but you have entered in the OneSingal configuration corbid360.com as your URL. What you have to do to test OneSignal is to change the URL inside of the OneSignal dashboard to the local server from your Vue project. Once you have tested it in your local environment, you can change it back to corbid360.com
Most likely the reason is that you need to specify to OneSignal that you are using localhost.
Select Typical setup
Enter your localhost URL
Enable Local Testing
(Treat HTTP localhost as HTTPS for testing)
Come join us in our discord server and learn more about our community and OneSignal: https://onesignal.com/onesignal-developers
I had spent a lot of time on this issue, at last, I got the solution. on list post https://stackoverflow.com/a/60239175/13178120. if you are getting this type of error you can go through with the above link.
I came into a eslint problem.
Generally, we have src folder side by side with package.json, like this:
|-projectName
|- src
|- .eslintrc.js
|- package.json
|- vue.config.js
Then i want to take compiling scripts and business code apart into different folders, and to enable them to be linted, i put two '.eslintrc.js' files in each, like this:
|- projectName
|- runtime
|- babel.config.js
|- .eslintrc.js
|- package.json
|- vue.config.js
|- business
|- .eslintrs.js
|- src
|- main.js
|- index.html
|- ...
Then i found eslint turns into chaos:
When i ran 'npm run build', eslint firstly linted files in 'runtime' folder as '.eslintrc.js' in it,
and then vue-cli-service came into building stage, which called eslint again as '.eslintrc.js' in 'template' folder,
but at last the vue-cli-service still finished building even if eslint throws errors, which should stopped building.
The output was like this:
✖ 7 problems (4 errors, 3 warnings)
3 errors and 3 warnings potentially fixable with the `--fix` option.
# ../template/src/store/index.js 14:0-34 18:10-14
# ../template/src/main.js
# multi ../template/src/main.js
...
File Size Gzipped
../template/build/apps/local/0/js/chun 174.42 KiB 58.47 KiB
k-vendors.9db3f582.js
...
DONE Build complete. The ../template/build directory is ready to be deployed.
INFO Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html
I don't know why this happened? Is there someting wrong with eslint config? I just put two '.eslintrc.js' files generated by 'vue craete' command in two different folders , and configure right paths in vue.config.js, like this:
// vue.config.js
...
outputDir: path.resolve(__dirname, '../template/build'),
pages:{
index: {
entry: path.resolve(__dirname, '../template/src/main.js')
}
}
...
Running ng build --prod command after update angularcli to version 8 does not generate index.html inside dist folder.
The problem is solved, In angular 8 while I get an error of maximum budget exceeds it builds the dist folder but without index file,
while I increase my budget like below:
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "10mb"
}
It works.
There are some problems when I use eslint to produce a html report.
In my package.json I have the following configuration:
"eslint-html": "eslint --format html ./src/* -o ./dist/eslint/index.html",
The output in the file ./dist/eslint/index.html has a report for the following files:
src/App.vue
src/router/index.js
...
But no report for these files:
no src/components/pages/...
no src/components/*.vue
Why is there no output for any file in src/components/?
There are two problems.
First you are providing ./src/* as argument for eslint. This means: "all files in ./src". This does not include sub folders. To accept any number of sub folders provide ./src/**/*
The second problem is that eslint does not know how to lint .vue files. For that you can install and configure an eslint plugin for vue files. Here is one: https://www.npmjs.com/package/eslint-plugin-vue