[Angular2 Router] Understand the Angular 2 Base href Requirement

The <base href=”/”/> you define will determine how all other assets you plan on loading treat their relative paths. While you’ll most often use / as your base href, it’s important to understand what’s going on in case you need to change how you’re hosting your project.

If the base href is not set, app will have error. The easiest way to do it set base href in html:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>WikiSearch</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">

</head>
<body>
  <app-root>Loading...</app-root>
</body>
</html>

Sometimes though, coders of an Angular application don’t have access to the head section of the
application HTML. This is true for instance, when reusing headers and footers of a larger, preexisting
application.
Fortunately there is a workaround for this cases. You can declare the application base path
programmatically, when bootstrapping the Angular application:

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    appRoutes,
    BrowserModule,
    FormsModule,
    HttpModule,
    JsonpModule,
    SharedServiceModule.forRoot()
  ],
  providers: [
    {provide: APP_BASE_HREF, useValue: ‘/‘},
    {
      provide: API_URL,
      useValue: `https://en.wikipedia.org/w/api.php?callback=JSONP_CALLBACK`
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }
时间： 2024-10-13 02:41:34

[Angular2 Router] Understand the Angular 2 Base href Requirement的相关文章

[Angular2 Router] Lazy Load Angular 2 Modules with the Router

Angular 2 lazy loading is a core feature of Angular 2. Lazy loading allows your application to start up faster because it only needs to use the main App Module when the page initially loads. As you navigate between routes, it will load the additional

[Angular2 Router] Exiting an Angular 2 Route - How To Prevent Memory Leaks

In this tutorial we are going to learn how we can accidentally creating memory leaks in our application while using the Angular 2 router. We are going to learn how we can prove that the memory leak is happening, we are going to learn what is causing

[Angular2 Router] Resolving route data in Angular 2

From Article: RESOLVING ROUTE DATA IN ANGULAR 2 Github If you know Anuglar UI router, you must know resolve function in ui router, which you can load data before template and controller get inited. In Angular2 router, you can also use resovler. The r

[Angular2 Router] Auxiliary Routes bit by bit

Article Github Auxiliary Routes is is little bit hard to understand. Here is demo, link You can see each category has an own 'View detials' button, and there is a side menu on the right side. What we want is when we click the "View details" butt

JSP中&lt;base href=&quot;&lt;%=basePath%&gt;&quot;&gt;作用

通常在JSP页面开通有如下代码: 1 <% 2 String path = request.getContextPath(); 3 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 4 5 %> 这段代码的意思是获取当前项目的路径,如:http://localhost:808

Angular2 Router

1 import Router import {RouteConfig, RouterOutlet, RouterLink, routerInjectables} from 'angular2/router'; 2 setting your RouteConfig @RouteConfig([ {path: '/', component: List, as: 'list'}, {path: '/about', component: Add, as: 'add'}, {path: '/help',

如何理解jsp页面的“&lt;base href=&quot;&lt;%=basePath%&gt;&quot;&gt;”

jsp文件里通常有以下代码: 这里的<base href="<%=basePath%>">是什么意思呢? 我在W3School网站上查了html中的base标签,解释如下: <base> 标签为页面上的所有链接规定默认地址或默认目标. 通常情况下,浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白. 使用 <base> 标签可以改变这一点.浏览器随后将不再使用当前文档的 URL,而使用指定的基本 URL 来解析所有

[Angular2 Router] Programmatic Router Navigation via the Router API - Relative And Absolute Router Navigation

In this tutorial we are going to learn how to navigate programmatically (or imperatively) by using the Router API. We are going to learn how to use the function navigateByUrl to navigate using a manually constructed string, but we are also going to l

&lt;base href=&quot;basepath&quot;&gt; 的理解

"base href " 今天在写一个JSP网页的时候,href不能用了,所有href鼠标放上去前面现实的都是"http:///",竟然有三个"/",而且前面也没有显示"localhost:8080"找了大半天找不出来,最后才发现不小心将Eclipse自动生成的下面两行代码误删了,<%String path = request.getContextPath();String basePath = request.getS