I have tried LocationStrategy in app.module.ts file with below code
import { LocationStrategy, HashLocationStrategy } from '#angular/common';
#NgModule({
imports: [
...
],
declarations: [
...
],
bootstrap: [...],
providers: [
{ provide: LocationStrategy, useClass: HashLocationStrategy }
]
})
In app.component.ts file i have added below code
import {Location} from '#angular/common';
export class AppComponent {
constructor(location: Location) {
location.go(location.path());
}
}
But unable to identify while navigating to other page or on same page if I refresh page or press f5 page is not reloading instead its giving 404 page not found error.Can you please tell me solution for this.
I have got same issue in my angular app with php after lots of solution found through goolge i tried this one- its working fine for me .
just put a .htaccess file in your root and add following code-
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)$ index.html [QSA,L]
</IfModule>
Related
I am trying to use images in my handlebars templates which are used for emails. The only problem is that the images are not showing. I have tried several ways to solve the problem, but nothing helped.
main.ts configs:
app.useStaticAssets(join(__dirname, '..', 'src', 'static'))
app.setBaseViewsDir(join(__dirname, '..', 'src', 'static', 'templates'))
app.setViewEngine('hbs')
Folder structure:
-src
--static
---img
----image1.png
----image2.png
---templates
----email1.hbs
----email2.hbs
How image would be used in the template:
<img src="/static/img/logo.png" alt="logo">
In email it looks like this:
https://ci4.googleusercontent.com/proxy/IhSgHQ3zXQ7Wh6MMxDAzkCjjFuvjZF3OI_Ru5CEQg3dGnin7xXJdUfjVTIg8Ag=s0-d-e1-ft#http:///static/img/logo.png
With reference to Nest.js official documentation, first install hbs module and then set the App module according to the code below and access your static files as in the second part of the code below.
import { Module } from '#nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { ServeStaticModule } from '#nestjs/serve-static';
import { join } from 'path';
#Module({
imports: [
ServeStaticModule.forRoot({
rootPath: join(__dirname, '..', 'static'),
}),
],
controllers: [AppController],
providers: [AppService],
})
export class AppModule {}
Using static files in your templates:
<div>
<img src='/img/image1.png' alt='' />
</div>
Take out the static directory from the src directory and place it next to it:
-src
-static
--img
---image1.png
---image2.png
--templates
---email1.hbs
---email2.hbs
I'm simply trying to import the https://shoelace.style/ library for use within an Angular app.
I've tried both their recommended method of adding style and link elements into the index file, and I've also tried adding their NPM package and then adding the following to my angular.json
"styles": [
"src/styles.scss",
"node_modules/#shoelace-style/shoelace/dist/themes/base.css"
],
"scripts": [
"node_modules/#shoelace-style/shoelace/dist/shoelace.js"
],
However no matter what I do, whenever I try to use a particular Shoelace component such as <sl-button> I get 'sl-button' is not a known element
What do I need to do to get this working?
Try adding this to your app module
schemas: [CUSTOM_ELEMENTS_SCHEMA]
Just make sure to apply the custom elements schema as shown below.
import { BrowserModule } from '#angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '#angular/core';
import { AppComponent } from './app.component';
#NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
providers: [],
bootstrap: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {}
You can find more about CUSTOM_ELEMENTS_SCHEMA here
When directly navigating to a child component in prod mode (ng serve --prod) it fails to load the CSS file, trying to fetch it from a nested path. For instance, navigating to "localhost:4200/doc/" the CSS Request URL is:
localhost:4200/doc/styles.6eab038f040a1c7c7ed6.css.
The error that is given:
Refused to apply style from 'http://localhost:4200/doc/styles.6eab038f040a1c7c7ed6.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
When accessing the root (localhost:4200) the CSS is loaded correctly. If you then navigate to the child component through the app itself, the problem does not occur.
It only occurs in prod mode, not on the development server. Changed nothing to the regular settings regarding styles.css, it is situated in the default folder.
"styles": [
"src/styles.css"
],
Anyone has any idea how this problem could be caused?
Edit
Found out that the problem lies in navigating to nested routes (helped by the reply of mikegross).
On a route without a nested parameter the problem does not occur, but on a route with a nested parameter (for instance 'doc/:id') it does.
Router module:
const routes: Routes = [
{ path: '', redirectTo: 'list', pathMatch: "full"},
{ path: 'list', component: ListComponent},
{ path: 'doc/:id', component: DocumentComponent},
{ path: '**', redirectTo: ''},
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
Update (feb. 28)
Since it was still a small project I generated a new angular project, installed same dependencies and literally copy pasted the code.
Although I have no idea why, in the new project the problem does not occur. The only difference lies in a minor version bump (ng 9.0 to 9.1).
I know this is an older post, but I got around this by using query parameters instead of route parameters. example:
const routes: Routes = [
{ path: '', redirectTo: 'list', pathMatch: "full"},
{ path: 'list', component: ListComponent},
{ path: 'doc', component: DocumentComponent},
{ path: '**', redirectTo: ''},
];
(I removed the :id from "doc/:id")
Navigate to the route:
route this._router.navigate(['/doc'],{queryParams: {id: id}});
Then retrieve the query parameter:
this._activatedRoute.snapshot.queryParamMap.get('id');
Coming late to the party. I had the same error with React in 2022.
Initially, I declared the CSS file with a relative path, as follows:
<link rel="preload" href="./style/Avenir-Light.woff2" as="font" type="font/woff2" crossorigin>
After changing it to an absolute path, it worked
<link rel="preload" href="/style/Avenir-Light.woff2" as="font" type="font/woff2" crossorigin>
Hope it helps future readers.
I am getting an error where webpack is not able to resolve the bootstrap 4 css which is sitting in the node_modules directory. I have looked at a number of tutorials around webpack 4 and bootstrap 4 but I am thinking it is not in the same folder structure.
I've also tried changing the import bootstrap css trying to change the directory to push it to the node_modules directory but that does not seem to work.
Error log from Spring Tool Suite
[INFO] ERROR in ./src/main/resources/static/js/app.js
[INFO] Module not found: Error: Can't resolve 'bootstrap/dist/css/boostrap.min.css' in 'C:\sourcecode\personal-website\src\main\resources\static\js'
[INFO] # ./src/main/resources/static/js/app.js 26:0-46
webpack.config.js
var path = require('path');
module.exports = {
entry: './src/main/resources/static/js/app.js',
performance: {
hints: false
},
output: {
path: __dirname,
filename: './src/main/resources/static/built/bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
loader: 'babel-loader',
query: {
presets: ['#babel/react', '#babel/env']
}
},
{
test: /\.css$/,
include: /stylesheets|node_modules/,
use: [ "style-loader", "css-loader" ]
}
]
}
};
app.js
import 'bootstrap';
import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/boostrap.min.css';
import Landing from './components/Landing';
class App extends React.Component {
render() {
return (
<div className="container">
<Landing />
</div>
);
}
}
ReactDOM.render(
<App />,
document.getElementById('react-app')
);
I'm not sure what your folder structure is like. But, I believe everything is relative to the location of the file where you're importing bootstrap's css from.
Given the folder structure below
sourceCode
|--node_modules
|--bootstrap
|--dist
|--css
|--bootstrap.min.css
|--routes
|--src
|--main
|--resources
|--static
|--app.js
|--dist
|--views
if you're importing bootstrap's CSS stylesheet in the app.js script, it would go like:
import '../../../../node_modules/bootstrap/dist/css/bootstrap-min.css';
The double period (..) means you're moving one step up the folder structure/tree.
You did say you've tried changing your import. But, I based my answer on what you've shown.
On the other hand, try taking a look at VS Code then check out the Path Intellisense extension. It'll help you with those imports. Happy coding :)
If I put the css file into the same directory as my component is, everything works, but when I edit the path to another directory I get this error in browser console:
Uncaught Error: Expected 'styles' to be an array of strings."
Works:
styleUrls: [
'admin.css'
],
Doesn't work:
styleUrls: [
'../../css/admin.css'
],
Works with scss file which is in the same directory:
styleUrls: [
'../../css/admin.scss'
],
Any ideas?
Found a solution. I had project default styles set to scss. To fix do following:
Open angular.json file
Change .scss
"schematics": {
"#schematics/angular:component": {
"styleext": "scss"
}
}
to .css
"schematics": {
"#schematics/angular:component": {
"styleext": "css"
}
}
and restart with ng serve