混合angularjs/angular app由于angular 13+移除deployURL而损坏

9vw9lbht  于 2023-08-02  发布在  Angular
关注(0)|答案(2)|浏览(167)

**已于2023年7月6日更新,因为我相信我已经确定该问题是由于我的应用程序的混合性质,而不仅仅是像我之前假设的那样升级angular。

我有一个angular/angularjs混合应用程序,目前将所有客户端文件构建到/client/目录中。
该目录以外的所有呼叫都由我的后端处理。我当前的配置使用deployUrl='/client/'为该目录的所有资产请求添加适当的前缀。
我正在升级angular,所以deployUrl现在被弃用/删除了,我正在试图弄清楚如何使它继续工作。
我试过设置angular.json baseHref='/client/',就像这里推荐的:
What is best way to go about replacing 'deployUrl' in angular.json for v13?
这对资产来说很好,但它破坏了应用程序的angularjs部分。特别是,当angularjs $location试图解析初始url时,它会给出一个错误。例如,假设初始url是https:/example.com/home,当ajs试图解析它时,它抛出这个错误:

Error: [$location:ipthprfx] Invalid url "https://example.com/home", missing path prefix "https://example.com/client/".

字符串
链接到this error in the angular docs
显然angularjs不喜欢baseHref,这在以前不是问题,因为deployUrl不需要baseHref。然而,现在我不能使用它,我似乎也不能做设置baseHref的变通方法,因为angularjs不能很好地使用它。
有什么想法我可以设置/构建我的应用程序,使angular和angularjs部分都可以工作吗?(是的,我很想摆脱所有angularjs代码,我们做得很慢,但我们仍然有很多ajs遗留代码)。

3lxsmp7m

3lxsmp7m1#

你能分享一个例子,你如何调用你的后端?我们使用baseHref选项为一个Angular 应用程序提供服务,并调用后端,如

this.http.get(`/v1/ressource`);

字符串
那很好。它可能是重要的前导/

2eafrhcq

2eafrhcq2#

我不知道这是否也适用于您,但我们有一个类似的设置(混合应用程序),我们所做的是:
1.在一个模块中设置APP_BASE_HREF提供程序(我们为此声明了AppRoutingModule),并将其包含在AppModuleimports中:

// app-routing.module.ts
import {APP_BASE_HREF, ...} from '@angular/common';
// ...
@NgModule({
    imports: [RouterModule.forRoot(routes, {
            // enableTracing: !environment.production,
        })
    ],
    exports: [RouterModule],
    providers: [
        {provide: APP_BASE_HREF, useValue: '/'},
        {provide: LocationStrategy, useClass: ... your strategy ...}
    ],
    declarations: []
})
export class AppRoutingModule {
}

// app.module.ts
@NgModule({
    imports: [
        AppRoutingModule,
        // ...
    ],
    // ...
})
export class AppModule {/*...*/}

字符串
1.在index.html上,使用以下命令设置路径:<base href="/client/">
1.在npm配置中,在package.json中,我们为servee2e命令设置了--serve-path选项。示例ng serve --serve-path '/client/' --port 4300。但您也可以在angular.json内部的serve配置上设置此选项:

// angular.json
// projects -> your-project -> architect -> serve -> options {
"servePath": "/client/"


另外,值得一提的是,在我们的Cypress配置中,我们有:

// cypress.config.ts
export default defineConfig({
  env: {
    baseUrl: 'http://localhost:4300/client/'   // with or without the '#' depending  on your location strategy.
  }
});

只是为了好奇我们有一个新的项目(不再使用混合动力),上面的设置也适用于纯Angular 14应用程序。但出于好奇,我试了试,把APP_BASE_HREF改成了/client/,看看会发生什么。

1.在我们的混合应用程序中,当更改为新路由时,它会复制/client/。旧的(angularJS)似乎可以工作。
1.在我们的新应用程序(非混合)中,它似乎不会影响任何东西,所以显然//client/可以工作(但我只是在本地尝试过,而不是在生产中,所以我不是100%确定)。

相关问题