标签: angular7

我试图将Angular 6应用程序迁移到angular 7应用程序,并得到以下警告消息

npm WARN @ngrx/effects@6.1.0 requires a peer of @angular/core@^6.0.0 but none is installed.
You must install peer dependencies yourself.
npm WARN @ngrx/store@6.1.0 requires a peer of @angular/core@^6.0.0 but none is installed.
You must install peer dependencies yourself.

那是什么意思 ？

是否意味着没有角7的兼容商店？

我的商店不会工作吗？

我只是想在Angular 7 DragDropModulefrom 的帮助下创建拖放组件@angular/cdk/drag-drop。但是我总是收到如下错误。

HomeComponent.html:14 ERROR TypeError: Cannot read property 'length' of undefined
    at moveItemInArray (drag-drop.es5.js:1287)
    at HomeComponent.push../src/app/home/home.component.ts.HomeComponent.drop (home.component.ts:31)
    at Object.eval [as handleEvent] (HomeComponent.html:15)
    at handleEvent (core.js:19676)
    at callWithDebugContext (core.js:20770)
    at Object.debugHandleEvent [as handleEvent] (core.js:20473)
    at dispatchEvent (core.js:17125)
    at core.js:18615
    at SafeSubscriber.schedulerFn [as _next] (core.js:10218)
    at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:196)

这是我的HomeComponent.html

<div style="display: flex;">
  <div class="container">
    <div class="row">
      <h2 style="text-align: center">Movies</h2>
      <div  cdkDropList #allmovies="cdkDropList" [cdkDropListData]="movies" [cdkDropListConnectedTo]="[towatch]"
        (cdkDropListDropped)="drop($event)">
        <app-movie *ngFor="let movie of movies" [movie]="movie" cdkDrag></app-movie>
      </div>
    </div>
  </div> …

我无法在7号角中发送正确的标题！我在后端使用护照：

"app.get('/api/users', passport.authenticate('jwt', {session: false}), (req, res, next) => {... bla bla bla...}."

当我尝试将有效的令牌从邮递员发送到我的路径/ api /用户时，一切正常，但是当我从角度不这样做时。（*角度不显示错误！）假设“ Bearer validToken”是一个有效的令牌，这样我就发送了标头：

getAll() {

const httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json',
'Authorization': 'Bearer validToke.' 
  });
};

return this.http.get<user[]>(`http://localhost:3000/api/users`, httpOptions);
}

我可以从angular进行身份验证并获取Bearer令牌，一切正常，如果删除了password.authenticate（'jwt'，{session：false}），我可以获取用户列表。

感谢您的阅读！

因此标题几乎说明了一切！

我有一个编译为PWA的Angular 7应用，我的package.json在下面。我的后端api是用AzureFunctions V2编写的。

"dependencies": {
    "@angular-devkit/core": "^7.0.5",
    "@angular/animations": "^7.0.3",
    "@angular/cdk": "^7.0.3",
    "@angular/common": "^7.0.3",
    "@angular/compiler": "^7.0.3",
    "@angular/core": "^7.0.3",
    "@angular/flex-layout": "^7.0.0-beta.19",
    "@angular/forms": "^7.0.3",
    "@angular/http": "^7.0.3",
    "@angular/material": "^7.0.3",
    "@angular/platform-browser": "^7.0.3",
    "@angular/platform-browser-dynamic": "^7.0.3",
    "@angular/platform-server": "^7.0.3",
    "@angular/pwa": "^0.10.5",
    "@angular/router": "^7.0.3",
    "@angular/service-worker": "^7.0.3", 
    "@types/date-fns": "^2.6.0",
    "angular-calendar": "^0.26.4",
    "chartist": "^0.11.0",
    "core-js": "^2.5.7",
    "rxjs": "^6.3.3",
    "rxjs-compat": "^6.3.3",
    "zone.js": "^0.8.26"
  },

我遇到的问题是，当我将api端点设置为使用https时，出现504网关超时错误。我知道https的配置/功能很好，因为这都是由Azure使用Azure Functions自动配置的。

我所有的API请求也都可以通过https与Postman一起正常工作。

更新-有点发展，如果我在未启用PWA的情况下在本地运行，则会得到以下不同的ERR_SPDY_PROTOCOL_ERROR

这是Chrome中的调试信息 chrome://net-internals/#events

t=9314 [st= 1]        UPLOAD_DATA_STREAM_READ  [dt=0]
                      --> current_position = 0
t=9314 [st= 1]        HTTP2_STREAM_UPDATE_SEND_WINDOW
                      --> delta = -73
                      --> stream_id = 3 …

我收到以下错误

ERROR Error: Uncaught (in promise): TypeError: Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script.
TypeError: Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script.

我使用提示“ ng add @ angular / pwa”添加了ngsw-config.json和清单文件。该提示还将我的“ serviceWorker”：true语句和我在环境中的注册添加到了app.module.ts中。

确认所有内容均已正确添加后，我随后运行命令“ ng build --prod”，该命令成功构建，显示的dist已成为 dist文件夹

然后我运行“ ng serve --prod”，并且收到图像错误中显示的 错误

在app.module.ts中使用的行

ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })

ngsw-configuration：

{
  "index": "/",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": …

正在开发的应用程序托管在iframe中.

我在我的应用程序中配置了以下路由:

    const routes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    redirectTo: 'list'
  },
  {
    path: 'list',
    component: ListComponent,
    canActivate: [CanActivateRoute]
  },
  {
    path: 'dashboard',
    loadChildren: './modules/dashboard/dashboard.module#DashboardModule'
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { enableTracing: true })],
  exports: [RouterModule],
  providers: []
})
export class AppRoutingModule { }

在ListComponent,OnInit方法,我用下面的代码来获取查询字符串PARAMS:

this.router.events.subscribe(val => {
      if (val instanceof RoutesRecognized) {
        console.log("val.state.root.firstChild.params: " + val.state.root.firstChild.params);
      }
    }); 
const firstParam: string = this.route.snapshot.queryParamMap.get('id');

这些似乎都不起作用.我申请的网址如下:

https://company.com/#/app-dev/list?id=3

QueryParamMap或者RoutesRecongnized似乎没有在url中获取查询字符串"id = 3".它总是返回null.

任何人都可以帮我如何从角度应用程序中的URL检索查询参数/查询字符串？

我最近将Angular 6应用迁移到了Angular 7

我的package.json看起来像这样：

{
  "name": "myApp",
  "version": "3.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --public-host http://localhost:4200/",
    "build": "ng build --prod",
    "serve": "ng serve --optimization=true --source-map=true --eval-source-map=true --live-reload=true --aot=false --vendor-chunk=true",
    "build-prod": "node --max_old_space_size=5000 ./node_modules/.bin/ng build --configuration=production",
    "build-localProd": "node --max_old_space_size=5000 ./node_modules/.bin/ng build --configuration=localProduction",
    "build-dev": "node --max_old_space_size=7000 ./node_modules/.bin/ng build --configuration=development",
    "test": "ng test --source-map=false --watch=false --code-coverage",
    "test-headless": "ng test --browsers=ChromeHeadless --watch=false --code-coverage",
    "doc": "compodoc -p src/tsconfig.app.json -s --port 8081",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "sonar-scanner": …

我正在使用ngx-chips将电子邮件列表作为标签添加到输入中。验证器确保每个标签看起来像一封电子邮件。

我如何确保：

1）验证器仅在添加标签时触发（即，用户点击回车，空格或逗号）

2）如果在按回车/空格/逗号时电子邮件无效，则该值仍然存在（即，它不会清除...以便用户可以对其进行修复）

堆栈闪电战在这里：https ://stackblitz.com/edit/ngx-chips-example-2qdudc

以下是我的电子邮件验证程序：

public validators = [ this.must_be_email ];
  public errorMessages = {
      'must_be_email': 'Please be sure to use a valid email format'
  };
  private must_be_email(control: FormControl) {        
      var EMAIL_REGEXP = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,3}$/i;
      if (control.value.length != "" && !EMAIL_REGEXP.test(control.value)) {
          return { "must_be_email": true };
      }
      return null;
  }

以下是标签：

<tag-input [(ngModel)]='emails' 
name="emails" 
#email="ngModel" 
[errorMessages]="errorMessages"
[validators]="validators" 
[editable]='true' 
(onTagEdited)="onTagEdited($event)" 
[separatorKeyCodes]="[32,188,186,13,9]"
[placeholder]="'Add email'" 
[secondaryPlaceholder]="'Enter email address(es)'" 
[clearOnBlur]="true" 
[addOnPaste]="true"
[addOnBlur]="true"
[pasteSplitPattern]="splitPattern" 
theme='bootstrap' 
required >
</tag-input>

对于2），我尝试在验证器中将“ return null”更改为control.value ...但是没有用

我正在尝试在使用Smart Admin模板（来自wrapbootstrap的主题）的angular 7应用程序上执行表单验证。

我的问题是，第一次刷新浏览器时，甚至当我导航到不包含其他表单的组件时，它都能按预期工作。当我导航到还包含带有其自身验证选项的表单的组件时，就会出现此问题。

此外，窗体的实际“有效”状态仍按预期工作。它只是不显示表单上的引导类和消息。

我尝试过重置表单，重置任何异步/非异步验证器以及其他我能想到的东西。

最后，在组件之间导航期间没有任何错误或任何错误。

这是我处理导航的主要模块（main.routing.ts）：

import { Routes, RouterModule } from '@angular/router';
import { ModuleWithProviders } from "@angular/core";
import { MainLayoutComponent } from '@app/shared/layout/app-layouts/main-layout.component';

import { MainComponent } from "./main.component";
import { SettingsComponent } from '../settings/settings.component';
import { GetAccountsComponent } from '../administration/get-accounts/get-accounts.component';
import { GetUsersComponent } from '../administration/get-users/get-users.component';
import { CreateAccountComponent } from '../administration/create-account/create-account.component';
import { CreateUserComponent } from '../administration/create-user/create-user.component';

import { GetTeamsComponent } from '../user/get-teams/get-teams.component';
import { GetGamesComponent } from '../user/get-games/get-games.component';
import { CreateTeamComponent } from …

所以我试图显示此日期作为输入。但是在我的表单构建器组中设置它的值时未显示。我也希望能够对其进行格式化。

this.post.startDate是日期类型

.ts中的内容

this.editForm = this.formBuilder.group({
      startDate: [this.post.startDate, Validators.compose([Validators.required])],
      endDate: [this.post.endDate, Validators.compose([Validators.required])]
    });

我的反应形式有这个

<form [formGroup]="editForm" (ngSubmit)="saveDate()">

        <label>Start Date: </label>
        <input type="date" formControlName="startDate" name="startDate" />

        <br />
        <label>End Date: </label>
        <input type="date" formControlName="endDate" name="endDate" />

        <br /><br />
        <input type="submit" value="Create Date">

      </form>