目前我有带路由的angular应用程序。从应用程序访问时，路由运行良好，但当我尝试在新选项卡中复制和粘贴某个链接时，我发现模块无法加载。示例CCD_ 1在应用程序中打开和在新选项卡中都工作良好，然而http://localhost:4200/updates/repositories/Test/units(Test是从调用组件传递的参数(这个url只在应用程序中工作，当粘贴到新的选项卡中时，我看到的错误是：
Uncaught SyntaxError: expected expression, got '<' scripts.91672879d55182c59502.js:1
Loading module from “http://localhost:4200/updates/repositories/sumDev/main-es2017.233f600c1169f07fe825.js” was blocked because of a disallowed MIME type (“text/html”).
units Loading failed for the module with source “http://localhost:4200/updates/repositories/sumDev/main-es2017.233f600c1169f07fe825.js”.
这是我的依赖设置：
"dependencies": {
"@angular-devkit/build-angular": "^0.1102.14",
"@angular/animations": "~11.2.14",
"@angular/cdk": "^11.2.13",
"@angular/common": "~11.2.14",
"@angular/compiler": "~11.2.14",
"@angular/core": "~11.2.14",
"@angular/forms": "~11.2.14",
"@angular/localize": "^11.2.14",
"@angular/material": "^11.2.13",
"@angular/platform-browser": "~11.2.14",
"@angular/platform-browser-dynamic": "~11.2.14",
"@angular/router": "~11.2.14",
"@auth0/angular-jwt": "^5.0.2",
"@delite/dlt-icons": "^1.1.5",
"classlist.js": "^1.1.20150312",
"hammerjs": "^2.0.8",
"keycloak-angular": "^8.2.0",
"keycloak-js": "^13.0.0",
"net": "^1.0.2",
"ng-http-loader": "^5.1.0",
"rxjs": "~6.6.7",
"sockjs-client": "^1.6.1",
"stompjs": "^2.3.3",
"tslib": "^2.0.0",
"zone.js": "~0.11.3"
},
"devDependencies": {
"@angular/cli": "~11.2.14",
"@angular/compiler-cli": "~11.2.14",
"@angular/language-service": "~11.2.14",
"@types/core-js": "^2.5.4",
"@types/jasmine": "~3.6.0",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^12.11.1",
"codelyzer": "^6.0.0",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "^6.3.4",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~7.0.0",
"tslint": "~6.1.0",
"typescript": "^4.0.8"
}
这是路由模块：
const routes: Routes = [{
path: '',
canActivate: [AuthGuard],
children: [
{
path: '',
redirectTo: "installer",
pathMatch: "full"
},{
path: 'updates',
component: UpdateRepositoryComponent,
children: [
{
path: 'repositories/:name/units',
component: UnitsComponent,
}
]
}]
}]
@NgModule({
imports: [RouterModule.forRoot(routes, {relativeLinkResolution: 'legacy'})],
exports: [RouterModule]
})
export class AppRoutingModule {}
这就是我如何导航this.router.navigate([this.router.url +/存储库/$｛name｝/单元]);
通过使用HashLocationStrategy设法解决了这个问题。这在url前面添加了#i，并有助于路由。你可以在这里找到完整的解释和例子
您所描述的是Client Site Rendering-CSR的本质，它只有在您通过代码导航时才能工作。
简而言之，直接输入url将触发服务器请求，因为您没有服务器来处理该请求，所以会发生错误。关于这方面的更多信息可以在带有CSR关键字的谷歌上找到。
是的，您可以使用
window.open(url, '_blank');
或者检查这个答案