2赞

Angular 2路由器没有基本href设置

作者：手机用户2402851155 | 2023-09-08 18:54

如何解决《Angular2路由器没有基本href设置》经验，为你挑选了5个好方法。

我收到错误,找不到原因.这是错误:

EXCEPTION: Error during instantiation of LocationStrategy! (RouterOutlet -> Router -> Location -> LocationStrategy).
    angular2.dev.js:23514 EXCEPTION: Error during instantiation of LocationStrategy! (RouterOutlet -> Router -> Location -> LocationStrategy).BrowserDomAdapter.logError @ angular2.dev.js:23514BrowserDomAdapter.logGroup @ angular2.dev.js:23525ExceptionHandler.call @ angular2.dev.js:1145(anonymous function) @ angular2.dev.js:14801NgZone._notifyOnError @ angular2.dev.js:5796collection_1.StringMapWrapper.merge.onError @ angular2.dev.js:5700run @ angular2-polyfills.js:141(anonymous function) @ angular2.dev.js:5719zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$$internal$$tryCatch @ angular2-polyfills.js:1511lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:1523lib$es6$promise$$internal$$publish @ angular2-polyfills.js:1494(anonymous function) @ angular2-polyfills.js:243microtask @ angular2.dev.js:5751run @ angular2-polyfills.js:138(anonymous function) @ angular2.dev.js:5719zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$asap$$flush @ angular2-polyfills.js:1305
    angular2.dev.js:23514 ORIGINAL EXCEPTION: No base href set. Please provide a value for the APP_BASE_HREF token or add a base element to the document.BrowserDomAdapter.logError @ angular2.dev.js:23514ExceptionHandler.call @ angular2.dev.js:1154(anonymous function) @ angular2.dev.js:14801NgZone._notifyOnError @ angular2.dev.js:5796collection_1.StringMapWrapper.merge.onError @ angular2.dev.js:5700run @ angular2-polyfills.js:141(anonymous function) @ angular2.dev.js:5719zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$$internal$$tryCatch @ angular2-polyfills.js:1511lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:1523lib$es6$promise$$internal$$publish @ angular2-polyfills.js:1494(anonymous function) @ angular2-polyfills.js:243microtask @ angular2.dev.js:5751run @ angular2-polyfills.js:138(anonymous function) @ angular2.dev.js:5719zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$asap$$flush @ angular2-polyfills.js:1305
    angular2.dev.js:23514 ORIGINAL STACKTRACE:BrowserDomAdapter.logError @ angular2.dev.js:23514ExceptionHandler.call @ angular2.dev.js:1157(anonymous function) @ angular2.dev.js:14801NgZone._notifyOnError @ angular2.dev.js:5796collection_1.StringMapWrapper.merge.onError @ angular2.dev.js:5700run @ angular2-polyfills.js:141(anonymous function) @ angular2.dev.js:5719zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$$internal$$tryCatch @ angular2-polyfills.js:1511lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:1523lib$es6$promise$$internal$$publish @ angular2-polyfills.js:1494(anonymous function) @ angular2-polyfills.js:243microtask @ angular2.dev.js:5751run @ angular2-polyfills.js:138(anonymous function) @ angular2.dev.js:5719zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$asap$$flush @ angular2-polyfills.js:1305
    angular2.dev.js:23514 Error: No base href set. Please provide a value for the APP_BASE_HREF token or add a base element to the document.
        at new BaseException (angular2.dev.js:8080)
        at new PathLocationStrategy (router.dev.js:1203)
        at angular2.dev.js:1380
        at Injector._instantiate (angular2.dev.js:11923)
        at Injector._instantiateProvider (angular2.dev.js:11859)
        at Injector._new (angular2.dev.js:11849)
        at InjectorDynamicStrategy.getObjByKeyId (angular2.dev.js:11733)
        at Injector._getByKeyDefault (angular2.dev.js:12048)
        at Injector._getByKey (angular2.dev.js:12002)
        at Injector._getByDependency (angular2.dev.js:11990)

有谁知道为什么路由器会抛出这个？我正在使用angular2 beta

这是我的代码:

import {Component} from 'angular2/core';
import { RouteConfig, ROUTER_DIRECTIVES } from 'angular2/router';
import {LoginComponent} from './pages/login/login.component';
import {DashboardComponent} from './pages/dashboard/dashboard.component';
@Component({
    selector: 'app',
    directives:[ROUTER_DIRECTIVES],
    template:`
        
            
        `
})
@RouteConfig([
    { path: '/',redirectTo: '/dashboard' },
    { path: '/login',name:'login',component: LoginComponent },
    { path: '/dashboard',name:'dashboard',component: DashboardComponent,}
])
export class AppComponent {
}


    
  




  
  
  

    

      

        Günter Zöchb..
         347
      
      
https://angular.io/docs/ts/latest/guide/router.html


  在标记之后添加基本元素.如果app文件夹是应用程序根目录,就像我们的应用程序一样,请完全按照此处所示设置href值.


该告诉角度路由器网址是什么的静态部分.然后,路由器仅修改URL的剩余部分.


  
  ...



或者添加 

> = Angular2 RC.6

import {APP_BASE_HREF} from '@angular/common';

@NgModule({
  declarations: [AppComponent],
  imports: [routing /* or RouterModule */], 
  providers: [{provide: APP_BASE_HREF, useValue : '/' }]
]); 


在你的引导程序中.

在旧版本中,导入必须像





import {APP_BASE_HREF} from '@angular/common';
bootstrap(AppComponent, [
  ROUTER_PROVIDERS, 
  {provide: APP_BASE_HREF, useValue : '/' });
]); 






import {provide} from 'angular2/core';
bootstrap(AppComponent, [
  ROUTER_PROVIDERS, 
  provide(APP_BASE_HREF, {useValue : '/' });
]); 






import {APP_BASE_HREF} from 'angular2/router';


> = beta.17

import {APP_BASE_HREF} from 'angular2/platform/common';


另请参阅Location和HashLocationStrategy在beta.16中停止工作


1> Günter Zöchb..：
https://angular.io/docs/ts/latest/guide/router.html


  在标记之后添加基本元素.如果app文件夹是应用程序根目录,就像我们的应用程序一样,请完全按照此处所示设置href值.


该告诉角度路由器网址是什么的静态部分.然后,路由器仅修改URL的剩余部分.


  
  ...



或者添加 

> = Angular2 RC.6

import {APP_BASE_HREF} from '@angular/common';

@NgModule({
  declarations: [AppComponent],
  imports: [routing /* or RouterModule */], 
  providers: [{provide: APP_BASE_HREF, useValue : '/' }]
]); 


在你的引导程序中.

在旧版本中,导入必须像





import {APP_BASE_HREF} from '@angular/common';
bootstrap(AppComponent, [
  ROUTER_PROVIDERS, 
  {provide: APP_BASE_HREF, useValue : '/' });
]); 






import {provide} from 'angular2/core';
bootstrap(AppComponent, [
  ROUTER_PROVIDERS, 
  provide(APP_BASE_HREF, {useValue : '/' });
]); 






import {APP_BASE_HREF} from 'angular2/router';


> = beta.17

import {APP_BASE_HREF} from 'angular2/platform/common';


另请参阅Location和HashLocationStrategy在beta.16中停止工作

        
第二种方式的小例子:`bootstrap(AppComponent,[ROUTER_PROVIDERS,提供(APP_BASE_HREF,{useValue:'/'})]); 
我不得不从'angular2/router'导入行`import {APP_BASE_HREF};` 

2> Dilip Nannaw..：
我在Angular4和Jasmine单元测试中遇到过类似的问题; 以下给出的解决方案适合我

添加以下import语句

import { APP_BASE_HREF } from '@angular/common';


为TestBed配置添加以下语句:

TestBed.configureTestingModule({
    providers: [
        { provide: APP_BASE_HREF, useValue : '/' }
    ]
})

        

3> Lionel Morri..：
您还可以通过在app.module.ts中包含以下内容来使用基于哈希的导航

import { LocationStrategy, HashLocationStrategy } from '@angular/common';


并将以下内容添加到@NgModule({...})

@NgModule({
  ...
  providers:    [
      ProductService, {
          provide: LocationStrategy, useClass: HashLocationStrategy
      }
  ],
  ...
})




"HashLocationStrategy-A哈希符号(#)被添加到URL中,并且哈希后的URL段唯一地标识要用作网页片段的路由.此策略适用于所有浏览器,包括旧浏览器."

摘录自:Yakov Fain Anton Moiseev."使用TypeScript开发Angular 2."

        

4> 小智..：
自2.0测试版:)

import { APP_BASE_HREF } from 'angular2/platform/common';

        

5> 小智..：
只是在index.html head标签中添加以下代码

   
    
     
      ...


对我来说就像一个魅力。

推荐阅读程序员比较者不工作如何解决《比较者不工作》经验，为你挑选了1个好方法。 ... [详细] 程序员如何在python中保护密码如何解决《如何在python中保护密码》经验，为你挑选了0个好方法。 ... [详细] 程序员 instance_eval和singleton方法之间的区别如何解决《instance_eval和singleton方法之间的区别》经验，为你挑选了0个好方法。 ... [详细] 程序员 AngularJS:显示加载器图像,直到加载数据如何解决《AngularJS:显示加载器图像,直到加载数据》经验，为你挑选了1个好方法。 ... [详细] 程序员 Microsoft JScript运行时错误:对象预期代码800A13F 如何解决《MicrosoftJScript运行时错误:对象预期代码800A13F》经验，为你挑选了1个好方法。 ... [详细] 程序员隐藏状态monad的类型参数如何解决《隐藏状态monad的类型参数》经验，为你挑选了1个好方法。 ... [详细] 程序员对于MVC6 RC1,现有的MVC项目是否有简单的升级过程？如何解决《对于MVC6RC1,现有的MVC项目是否有简单的升级过程？》经验，为你挑选了1个好方法。 ... [详细] 程序员动态突出显示时,将项目符号添加到<p>？如何解决《动态突出显示时,将项目符号添加到<p>？》经验，为你挑选了2个好方法。 ... [详细] 程序员是否可以将EntityFramework与MemSQL一起使用？如何解决《是否可以将EntityFramework与MemSQL一起使用？》经验，为你挑选了0个好方法。 ... [详细] 程序员为什么clock()返回1.84467e + 13？如何解决《为什么clock()返回1.84467e+13？》经验，为你挑选了1个好方法。 ... [详细] 程序员如何修复数组索引超出范围的异常如何解决《如何修复数组索引超出范围的异常》经验，为你挑选了1个好方法。 ... [详细] 程序员使用Express.JS来使用API 如何解决《使用Express.JS来使用API》经验，为你挑选了1个好方法。 ... [详细] 程序员获取没有指定子项的父(作业)的SQL查询(状态) 如何解决《获取没有指定子项的父(作业)的SQL查询(状态)》经验，为你挑选了0个好方法。 ... [详细] 程序员如何使用dplyr汇总与组不匹配的值如何解决《如何使用dplyr汇总与组不匹配的值》经验，为你挑选了2个好方法。 ... [详细] 程序员 po> 2&1对popen做了什么？如何解决《po>2&1对popen做了什么？》经验，为你挑选了1个好方法。 ... [详细] 程序员无效的'asm':嵌套的汇编方言替代品如何解决《无效的'asm':嵌套的汇编方言替代品》经验，为你挑选了1个好方法。 ... [详细] 程序员允许在Javascript中使用命名参数或位置参数如何解决《允许在Javascript中使用命名参数或位置参数》经验，为你挑选了0个好方法。 ... [详细] 程序员如果用户仅在EditText - Android中输入空格,则显示错误如何解决《如果用户仅在EditText-Android中输入空格,则显示错误》经验，为你挑选了1个好方法。 ... [详细] 程序员 @Path注释中冒号(:)的含义如何解决《@Path注释中冒号(:)的含义》经验，为你挑选了0个好方法。 ... [详细] 程序员无法连接到tcp:5037:无法连接到127.0.0.1:5037:无法建立连接,因为目标计算机主动拒绝它.(10061) 如何解决《无法连接到tcp:5037:无法连接到127.0.0.1:5037:无法建立连接,因为目标计算机主动拒绝它.(10061)》经验，为你挑选了1个好方法。 ... [详细] 吐了个 "CAO" ! 吐个槽吧,看都看了会员登录 | 用户注册

手机用户2402851155 这个屌丝很懒，什么也没留下！关注作者 Tags | 热门标签 actionscrip bash c# c++ c语言 erlang flutter go golang java javascript lua node.js perl php python scala typescript RankList | 热门文章 1路由时HashLocationStrategy不会产生#位置？ 2Webstorm 11检查打字稿文件而不编译.使用webpack进行编译 3无法从链接中删除下划线 4排序字符串是O(n ^ 2logn)是真的吗？ 5在Firebase Hosting上提供gzip压缩文件 6Android Studio 2.0 - NoSuchAlgorithmException:SHA256WITHDSA签名不可用 7Java方法重载:参数的顺序是否会影响延迟？ 8如何离线安装适用于Windows 10的D3D11 SDK图层 9当PHP没有被修改时,PHP是否优化了数组类型的函数参数,而不是通过引用显式传递的？ 10为什么sbt编译失败并出现StackOverflowError？ 11使用Protractor获取ng-repeat ng-repeat 12如何处理Spring Boot重定向到/ error？ 13如何在Powershell哈希表中获得特定值的名称？ 14递归函数中堆栈溢出的原因 15UICollectionViewCell和UICollectionView的高度相等 16PyCharm类型暗示古怪 17如何使用Angular 2(beta和更新版本)加载RxJS(和zone.js/reflect-metadata)？ 18SQL有MAX(COUNT)错误 19再现"关闭一个foreach的变量"得到了 20张量流softmax回归始终预测1