标签: angular6

我正在将我的应用程序升级到Angular 6.我正在从Angular 4升级,但下面的代码在Angular 6中导致错误,它在Angular 4中运行良好.

我得到的错误:

类型'typeof Observable'上不存在属性'of'

错误:类型'Observable'上不存在属性'catch'

我该如何解决这些错误？

  private authInterceptor(observable: Observable<Response>): Observable<Response> {
    return observable.catch((error, source) => {
      if (error.status == 401) {
        this.router.navigateByUrl('/login');
        return Observable.of();
      } else {
        return Observable.throw(error);
      }
    });
  }

我读过i18n运行时支持是以角度6来的,但是在rc3中找不到任何东西.是推迟还是没有记录？i18n文档仍然表明,不必为每种语言构建单独的构建.

https://github.com/ngx-translate是另一种选择,但我不知道这将支持多长时间,或者Angular 6中的支持是完全不同的.稍后迁移将包括重写代码中的所有i18n实例并创建新的翻译文件.我有空间等待我的项目,但不是永远.

无法找到关于Angular 6中新的i18n支持的内容,除非它即将到来.

在Angular 5中,我们可以使用生成不同环境的构建

ng build --prod --env=uat

迁移到Angular 6后,上面的命令会抛出错误

Unknown option: '--env'

我已经阅读了关于SO 的文档和所有相关问题,但是Angular的XSRF机制仍然不适合我:我绝不能自动附加X-XSRF-TOKEN标头发出POST请求.

我有一个带登录表单的Angular 6应用程序.

它是Symfony(PHP 7.1)网站的一部分,Angular应用程序页面,当从Symfony提供时,发送正确的Cookie(XSRF-TOKEN):

我的app.module.ts包含正确的模块:

// other imports...
import {HttpClientModule, HttpClientXsrfModule} from "@angular/common/http";

// ...
@NgModule({
  declarations: [
    // ...
  ],
  imports: [
    NgbModule.forRoot(),
    BrowserModule,
    // ...
    HttpClientModule,
    HttpClientXsrfModule.withOptions({
      cookieName: 'XSRF-TOKEN',
      headerName: 'X-CSRF-TOKEN'
    }),
    // other imports
  ],
  providers: [],
  entryComponents: [WarningDialog],
  bootstrap: [AppComponent]
})
export class AppModule {
}

然后,在Service的方法中,我正在进行以下http请求(this.http是一个实例HttpClient):

this.http
    .post<any>('api/login', {'_username': username, '_pass': password})
    .subscribe(/* handler here */);

post请求永远不会发送X-XSRF-TOKEN标头.为什么？

如何在Angular 6中的单个项目下创建多个应用程序？在新的angular.json文件中,没有"app":[]数组,之前我们用来手动创建/添加多个应用程序.此外,我没有在此阶段找到适当的文档,其中详细说明了如何在单个项目中创建多个应用程序.任何帮助,将不胜感激.谢谢.

有两个子问题:

1. 我应该将秘密环境变量放入environment.ts文件中吗？

2. 该process变量垫片已经一去不复返了.如果我使用它,tsc会抛出一个错误:Cannot find name 'process'.

这是我的事:

关于Q1:我不认为在environment.ts文件中放置秘密环境变量是正确的.因为这些文件将推动源代码管理,如GitHub,gitlab,bitbucket.这不安全.所以我认为秘密环境变量应该通过process.env,比如process.env.ACCESS_TOKEN,或者,如果使用docker-compose,应该将秘密环境变量放在.env文件中并将此文件添加到.gitignore文件中.

关于Q2:如果我使用Heroku设置我的环境变量,它取决于process变量.现在,angular6摆脱了垫片process,我如何与Heroku合作？此外,通过.env文件使用docker-compose传递环境变量process也取决于.

如果使用.envdocker-compose文件,则会出现一个新问题:如何将.env文件中的变量传递给angular6 environment.ts文件

更新1:

这是一个案例:

首先,没有后端

我使用GitHub API和另一个开放API,并且有一个名为的环境变量access_token,如果我把它放在environment.ts文件中并将我的前端源代码推送到Github,Github会检测到秘密信息并给我一个警告,他们说:

您不应该在源代码中放置GitHub访问令牌并将其推送到repo,因此他们将撤销我的访问令牌.

所以我想使用process.env.ACCESS_TOKEN,但process变量垫片已经消失Angular6,我该如何解决？我应该将environment.ts文件添加到.gitignore文件还是什么？

更新2

这是另一个案例

继续更新1.现在,我添加docker-compose.yaml并Dockerfile在docker容器中运行我的前端应用程序.

这是工作流程:

1. 将Dockerfile运行npm run build命令和复制./build目录写入容器的nginx …

我使用"离子加载控制器"来显示一个微调器,直到检索到数据然后它调用"dismiss()"来解除它.它工作正常,但有时当应用程序已经拥有数据时,在"create()"和"present()"完成之前调用"dismiss()",这将保持微调器而不会消失...

我试图在"loadingController.present().then()"中调用数据,但这导致数据变慢...

这是一个错误吗？如何解决这个问题？

我的代码示例:

customer: any;

constructor(public loadingController: LoadingController, private customerService: CustomerService)

ngOnInit() {
  this.presentLoading().then(a => consloe.log('presented'));
  this.customerService.getCustomer('1')
  .subscribe(customer => {
    this.customer = customer;
    this.loadingController.dismiss().then(a => console.log('dismissed'));
  }
}

async presentLoading() {
  const loading = await this.loadingController.create({
    message: 'wait. . .',
    duration: 5000
  });
  return await loading.present();
}

所以这个问题很基本,但我找不到.

我创建了一个新的应用程序ng new my-project,然后是一个ng g library my-library.然后我执行了命令ng build,但是只是构建我的应用程序,而不是我的库或我的e2e项目.这是因为在angular.json中,defaultProject设置为my-project.我可以将它更改为my-library,然后ng build将构建lib.

有没有办法让角度在一个ng-build中构建所有项目和库？

我有一个组件(Angular 6),它是几个组件的集合.这会产生一个很长的HTML(我正在使用Bootstrap 4).现在我想将此HTML转换为PDF.我搜索了很多,发现了许多适用于jsPDF的解决方案.要求是在HTML中显示一个清晰的布局(以便用户可以选择,复制等).但我找到的解决方案或者尝试手动添加文本行,这在我的场景中是不可能的; 或者他们将HTML转换(栅格化？)到图像格式.另外,我想保留HTML的格式和字体以及样式.

到目前为止,我已经尝试过:这个和这个.

我尝试按日期为我的Angular 6应用程序排序数组对象.数据具有字符串格式.我想知道是否有一个现有的模块在Angular中执行排序,或者我们必须在Typescript中构建排序函数.

角度模板

<app-item *ngFor="let item of someArray"></app-item>

数组

[
  {
    CREATE_TS: "2018-08-15 17:17:30.0",
    Key1: "Val1",
    Key2: "Val2",
  },
  {
    CREATE_TS: "2018-08-15 17:25:30.0",
    Key1: "Val1",
    Key2: "Val2",
  },
  {
    CREATE_TS: "2018-08-15 17:28:30.0",
    Key1: "Val1",
    Key2: "Val2",
  }
]