I need to open the base href link for the 1st page load working with Angular 6 like
xyz.com/anexure/5.
This is working fine in my localhost.But this is not working in live server.
In Live server I folder structure like
xyz.com/annexture/annextureform
Inside the annextureform folder I have the angular project
index.html
base href ="xyz.com/annexture/annextureform/"
app-routing.module.ts
const routes: Routes = [
{path: '', redirectTo: '/annexture/:id', pathMatch: 'full' },
{path: 'annexture/:id', component: AnnextureformComponent}
];
What changes I have to make in htaccess file for the angular project?
If u deploy the project inside some other folder, the changes you need to make are:
Just folder names and not the domain folder name
base href="annexture/annextureform/"
Related
I have a landing file which is in pure HTML. (landing.html)
I want the main URL of the website to be this file and the rest of the URLs to go in the React app.
For example:
example.com -> landing.html
example.com/app -> react app
example.com/login -> react app
As I said, I want the main URL to read the landing.html.
But the rest of the app should read the build version of React.
If it's possible i want it to be a part of the React app and not adding it directly in build folder. After running build it should be automaticly in build folder so basicly kinda implicitly to be a part of react app.
One more thing I dont want to convert it to jsx. 😁
How can I implement this ?
For the landing page use
var __html = require('./template.html');
var __html = require('./template.html');
var template = { __html: __html };
React.module.exports = React.createClass({
render: function() {
return(
<div dangerouslySetInnerHTML={template} />
);
}
});```
on / route and other react components use on app and login route
I researched a bit and found two solution for it.
First : Using multipage app feature in Vite.
Second: confining nginx on server for this feature. (I didn't do the configuration someone else did, but it worked)
I've ran npm run build and this generates a dist folder with the static assets such as images. I'm using history mode on vue router.
Here's what the HTML for the image looks like:
Here's what the dist folder looks like:
Now after deploying the site, the images are broken:
However, the img src is correct:
So what's the issue here?
I'm going to go out on a limb here and guess that the problem is related to your routes and that the relative paths are not working from routes.
If your app is shown on root directory /, the relative image path would work, but because (and it's guess) your route changes the current path to something like /sales, the relative path no longer works.
You may be able to fix this just by making sure that you use the relative path.
for example, if you're using a vue-cli-3 generated project, check the vue.config.js file and make sure you don't have the publicPath set, because it defaults to /.
module.exports = {
publicPath: "./", // <= this will use relative path
};
Try to change paths in the index.js containing routes to your destination folder for example: dist.
As a publicPath I set ./ as Daniel mentioned.
This helped me but still, I've just started to learn VueJS so it might not to be the best solution.
const routes = [
{
path: '/dist/',
name: 'Home',
component: Home
},
{
path: '/dist/map',
name: 'Map',
component: Map
},
{
path: '/dist/store',
name: 'Store',
component: Store
}
]
I have an angular app, it has a bundle and a piece of HTML that contains a root selector
<app></app>
where the app is bootstrapped.
Is it possible to somehow render a component from that app outside this app container? In the HTML, having something like
<component-name></component-name>
The reason for this is this app is being loaded externally for analysing only components one by one, and not the app as a whole, sort of like a style guide for the components in the app. So I load the bundle and I want to be able to render only a component that the user chooses.
Just add any components you need to the bootstrap array that is passed to NgModule:
#NgModule({
declarations: [AppComponent, ContactFormComponent],
imports: [...],
providers: [SharedService],
bootstrap: [AppComponent, ContactFormComponent]
})
export class AppModule {}
and now voila this works:
<html><body>
<app-contact-form></app-contact-form>
============================================
<app-root></app-root>
</body></html>
Just learned this from the plunker in the answer Günter linked above. very cool. tested with angular 6
You can bootstrap multiple elements. You can inject a shared service to be able to communicate between components of different Angular2 applications (on the same page).
How to dynamically create bootstrap modals as Angular2 components?
I am using Visual Studio 2013 Update 2 to develop an angular application.
Below is folder structure
I have placed two login.html. One inside Views folder another with same level with index.html. For the sake of snapshot I have placed two login.html together. Otherwise, there is only one login.html in my application.
Below is code that I have written in app.config. I am using AngularAMD & requirejs for my application.
app.config(function ($routeProvider) {
$routeProvider
.when('/login', angularAMD.route({
templateUrl: '/login.html',
controller: 'LoginCtrl',
controllerUrl: 'controller/LoginController',
navtab: 'login'
}))
.when('/home', angularAMD.route({
templateUrl: '/home.html',
controller: 'HomeCtrl',
controllerUrl: 'controller/HomeController',
navtab: 'home'
}))
.otherwise({ redirectTo: '/login' });
});
When I am using templateUrl as "/login.html" as shown in app.config then the application is loading the login.html perfectly.
However, when I am using templateUrl as "/views/login.html" ( or "views/login.html" or "../views/login.html" ), it is not working. It is showing 404 error in F12 tool in Chrome while loading login.html.
However, the path which is being shown is matching with my directory structure. Below is the snapshot of F12 tool.
Can anyone please tell me where I am making mistake when trying to access HTML files from the folder.
Any help would be appreciated. Thanks in advance.
I am trying to display a specific link on all the pages in my web application. The link is given below
Some text for the link!
My routes file
Route::get('home', 'HomeController#index');
Route::get('path1/path2/path3', 'SomeController#someFunction');
Route::get('my-link', 'SomeController#myLink');
While browsing the web application, when I am at mydoamin.com/home, the link address is mydomain.com/my-link, which is correct.
But when I am at the URL mydoamin.com/path1/path2/path3, the link address becomes mydoamin.com/path1/path2/my-link. Hence, after clicking the link I get 404 error as the path doesn't exist.
How do I make the link to always show mydomain.com/my-link on all the pages without hard-coding the domain name?
Note: I have put the link code Some text for the link! in a partial file; and I am including that file in all the pages.
Why you shouldn't use /my-link?
You could use My link on a site that's running on the root directory (www.domain.com/my-link). But if you're running it in a subdirectory you need to change all the url's.
That's why Laravel introduced named routes, this will automatically creates the correct url.
For example:
If you're site runs at www.domain.com/my-website/ and you need to point to /my-link you need to change all your links in your project to /my-website/....
So I suggest to use named routes.
How to use named routes
Named routes allow the convenient generation of URLs or redirects for specific routes.
And this is de code you need to use:
Route::get('home', ['as' => 'home', 'uses' => 'HomeController#index']);
Route::get('path1/path2/path3', ['as' => 'path3', 'uses' => 'SomeController#someFunction']);
Route::get('my-link', ['as' => 'my-link', 'uses' => 'SomeController#myLink']);
After that you can use:
<a href="{{ url(route('my-link')) }}">
Some text for the link!
</a>
Laravel will automatically create the correct url for the named route you want to use.
Hope this works!
More information at https://laravel.com/docs/5.2/routing#named-routes
Should be href="/my-link", / means start from root.
You may try different ways like ./my-link ,../my-link or ../../my-link to see what happend.
see link: absolute, relative, root