小编Art*_*ter的帖子

将@angular/pwa 添加到我的应用程序后

ng add @angular/pwa --project appName

我得到错误

core.js:34469 未捕获的类型错误：无法读取 registerNgModuleType 处未定义的属性“id”

如果我appName.module.ts从进口中移除

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

应用程序再次运行。

添加了 Angular.json

"serviceWorker": true,
"ngswConfigPath": "projects/tol5-admin-app/ngsw-config.json"

这是我的 package.json

 "private": true,
  "dependencies": {
    "@angular/animations": "~8.2.5",
    "@angular/cdk": "~8.2.2",
    "@angular/common": "~8.2.5",
    "@angular/compiler": "~8.2.5",
    "@angular/core": "~8.2.5",
    "@angular/flex-layout": "^8.0.0-beta.27",
    "@angular/forms": "~8.2.5",
    "@angular/material": "^8.2.2",
    "@angular/platform-browser": "~8.2.5",
    "@angular/platform-browser-dynamic": "~8.2.5",
    "@angular/router": "~8.2.5",
    "@angular/service-worker": "~8.2.5",
    "@ngrx/effects": "^8.3.0",
    "@ngrx/schematics": "^8.4.0",
    "@ngrx/store": "^8.3.0",
    "@ngrx/store-devtools": "^8.3.0",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "jquery": "^3.4.1",
    "rxjs": "~6.4.0",
    "tslib": "^1.10.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": { …

我需要从 @ngrx/effect 关闭角度材质对话框

这是我的代码

import { MatDialogRef, MatDialog } from "@angular/material/dialog";
import { AddComponent } from "./../../add/add.component";

@Injectable()
export class UserEffects {
@Effect()
addNewUser$ = this.actions$.pipe(
    ofType(actions.UserActionTypes.addNewUser),
         mergeMap((user: actions.addNewUser) =>
             this.userService.createUser(user.user).pipe(
                map(() => {
                  new actions.LoadUsers(),
                  this.notificationService.success("User added successfully!");
                  this.dialogRef.close();     <------ // here i try to close
                }),
              catchError(error => of(new actions.Error(error.error)))
            )
        )
    );

constructor(
    private actions$: Actions<actions.UserActions>,
    private userService: UserService,
    private notificationService: NotificationPopUpServiceService,
    public dialogRef: MatDialogRef<AddComponent>
) {}
}

有了这个我得到了错误

main.ts:13 NullInjectorError: R3InjectorError[EffectsRootModule -> InjectionToken ngrx/effects: Root Effects …

我需要在我的 angulajs 应用程序中实现 RTSP 视频流。正如我们所知，RTSP 与 HTML 一起工作并不容易，我们需要使用一些插件。

我尝试使用html5_rtsp_player，这只是对我有用的解决方案，但我找不到如何制作四个流视图 (div) 的方法，而且因为这是第三方服务器，如果服务器有时关闭或更改，我很害怕诸如此类，我会遇到麻烦，并且使用此html5_rtsp_player我丢失了太多带宽，因为我需要先将视频流带到浏览器并发送到流媒体服务器进行转换，然后再取回显示预览（如果我错了，请解释一下，因为这是我第一次用视频流做一些事情）代码如下。

<video id="test_video" controls autoplay>
<source src="rtsp://xx.xx.xx.xx?real_stream" type="application/x-rtsp">
</video>
<video id="test_video" controls autoplay>
<source src="rtsp://xx.xx.xx.xx?real_stream" type="application/x-
rtsp">
</video>
<script src="https://cdn.bootcss.com/babel-polyfill/7.0.0-
beta.2/polyfill.min.js"></script>
<script src="streamedian.min.js"></script>
<script>
var p = Streamedian.player('test_video', {socket:  
"wss://specforge.com/ws/"});
</script>

接下来，我尝试使用videogular，但我的流不起作用，这里没有发生任何事情是代码。

<video id="test_video" controls autoplay>
<source src="rtsp://xx.xx.xx.xx?real_stream" type="application/x-rtsp">
</video>
<video id="test_video" controls autoplay>
<source src="rtsp://xx.xx.xx.xx?real_stream" type="application/x-
rtsp">
</video>
<script src="https://cdn.bootcss.com/babel-polyfill/7.0.0-
beta.2/polyfill.min.js"></script>
<script src="streamedian.min.js"></script>
<script>
var p = Streamedian.player('test_video', {socket: …

我需要在页面重新加载后显示活动选项卡。我发现我需要将活动选项卡名称存储到会话或本地存储中。但对我来说这不起作用。这是 html

<uib-tabset>
     <uib-tab active="active" ng-init="isActive = isActiveTab('Info', $index)" index="0" data-toggle="tab" href="#sectionInfo" 
     heading="Info" classes="tabovi" select="setActiveTab('Info')"></uib-tab>
     <uib-tab active="active" ng-init="isActive = isActiveTab('Info 2',$index)" index="1" data-toggle="tab" href="#sectionInfoTwo" 
     heading="Info 2" classes="tabovi" select="setActiveTab('Info')"></uib-tab>
</uib-tabset>

这是控制器

// Save active tab to localStorage
$scope.setActiveTab = function (activeTab) {
    sessionStorage.setItem("activeTab", activeTab);
};

// Get active tab from localStorage
$scope.getActiveTab = function () {
    return sessionStorage.getItem("activeTab");
};

// Check if current tab is active
$scope.isActiveTab = function (tabName, index) {
    var activeTab = $scope.getActiveTab();
    return (activeTab === tabName || …

我有 angular 应用程序，我尝试添加 keycloak。我设置了 keycloak，但是当我尝试运行 angular 应用程序时，我得到了 ERROR Error: Uncaught (in promise): An error happened during access validation. Details:TypeError: Cannot read property 'resourceAccess' of undefined

Angular 版本：8.2.5 Keycloak-angular：7.0.1 Keycloak-js：7.0.0

这是我的 auth.guard.ts

import { Injectable } from "@angular/core";
import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from "@angular/router";
import { KeycloakService, KeycloakAuthGuard } from "keycloak-angular";

@Injectable()
export class AppAuthGuard extends KeycloakAuthGuard {
  constructor(protected router: Router, protected keycloakAngular: KeycloakService) {
    super(router, keycloakAngular);
  }

  isAccessAllowed(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> {
    return new Promise(async (resolve, …

我在一个 angular 8 应用程序中有多个项目......到目前为止，我只有一个项目，@ngrx/store但现在我添加@ngrx/store了每个项目，并且由于多个商店，我需要在每个项目中 app.module导入StoreModule.forFeature

imports: [
    StoreModule.forRoot({}),
    StoreModule.forFeature("project1store", fromStore.reducer1)
]

在第二个项目中，我导入

 imports: [
        StoreModule.forRoot({}),
        StoreModule.forFeature("project2store", fromStore.reducer2)
    ]

问题是，在 redux 中，我看到了所有数据，但我无法接受。此外，我收到每个减速器的错误（所有这些减速器之前都工作过）

store.js:994 @ngrx/store: 状态中不存在特性名称“UserProfileReducer”，因此 createFeatureSelector 无法访问它。确保使用 StoreModule.forRoot('UserProfileReducer', ...) 或 StoreModule.forFeature('UserProfileReducer', ...) 将其导入到加载的模块中。如果默认状态是未定义的，如路由器状态的情况，则可以忽略此仅用于开发的警告消息。

我用桶（index.ts）导入所有东西，在这种情况下从fromStore. 每个应用程序都有自己的桶，我再次检查，每条路径都可以...

看这张图，所有数据都在，但是现在StoreModule.forFeature拿不下来了

编辑：

我认为问题出在这里

在此之前，我得到了类似的数据，store.siteReducer但现在我需要像state.app2.siteReducer

如何以及在哪里添加这个app1或app2？

谢谢

编辑 2

我可以通过这种方式直接在组件中获取数据

 select((state: any) => state.app1.SiteReducer)
.subscribe(res => {...})

但是通过这种方式，我需要对整个应用程序组件进行更改。如何直接在选择器中进行此操作？我试试这个

 export const getState = createFeatureSelector<States>("app1");

export const getSite = createSelector(
  getState,
  (state: …

我需要为表单中的每个输入字段设置服务器错误验证。问题是，我使用ngrx@store并且实际上我有

 @Effect({ dispatch: false })
  error$ = this.actions$.pipe(
    ofType(actions.UserActionTypes.Error),
    map(
      (error: actions.Error) => {
        new actions.Error(error);
      }
      //this.notificationService.warn(error.error.message)
    )
  );

使用此代码，我将错误存储到存储中。

现在我需要在我的组件中获取这些错误，我想在其中检查我收到错误的输入字段，并将错误设置为所选字段旁边的 HTML。

    this.errorsMsgs$ = this.store.select(fromStore.UserSelectors.getErrors);
    this.errorsMsgs$.pipe(takeUntil(this.destroy$)).subscribe((error: any) => {
      console.log(error);
      for (let err of error) {
        if (err.field === "username") {
          this.usernameError = err.defaultMessage;
        }
        if (err.field === "lastName") {
          this.lastNameError = err.defaultMessage;
        }
        if (err.field === "firstName") {
          this.firstNameError = err.defaultMessage;
        }
        if (err.field === "email") {
          this.emailError = err.defaultMessage;
        }
        if (err.field === "phone") { …

我需要在 URL 中发送参数以从服务器获取过滤后的数据。

我这样设置参数

const queryParams = new HttpParams(
      {
        fromObject: {
          page: this.paginator.pageIndex.toString(),
          pageSize: this.paginator.pageSize.toString(),
          search: this.searchKey,
          sortBy: this.selectedFilterByStatusValue,
          sortByType: this.selectedFilterSortByValue
        }
      });

并为我服务

 getData(params: HttpParams) {
    return this.apiService.get<IResponseList<IData>>(`${this.url}/list`, params);
  }

问题是，当未选择某些过滤器时，因为我不需要它们，并且它设置为未定义，但这是不正确的......我需要删除未定义的参数。

这里是console.log为了queryParams

cloneFrom: null
encoder: HttpUrlEncodingCodec {}
map: Map(5)
  [[Entries]]
  0: {"page" => Array(1)}
  1: {"pageSize" => Array(1)}
      key: "pageSize"
      value: ["3"]
  2: {"search" => Array(1)}
  3: {"sortBy" => Array(1)}
  4: {"sortByType" => Array(1)}

我尝试使用.set("page", this.paginator.pageIndex)and.append(...)但我总是得到相同的结构

另外，我尝试直接在服务中修复此问题，但这不起作用，我再次得到undefined

this.httpClient.get(`${this.url}/list`, { 
  params: …

我有两个日期时间选择器（从，到）。我需要得到分钟（1505分钟）和日期和时间（2天1小时35分钟）之间的FROM和TO日期之间的差异。

我使用moment.js

var now = moment('2018-03-28 14:02');
var end = moment('2018-06-02 00:00'); // another date
var duration = moment.duration(end.diff(now));
var days = duration.asDays();
console.log(days) //65.41527777777777

这里输出的65.41527777777777地方65是正确天，但如何转换41527777777777到小时和分钟。如果我这样做，0,41527777777777 * 24 = 9,96666666648我会得到9个小时，0,96666666648 * 60 = 57这又是正确的区别

65 day, 9 hour and 57 min

但是，有什么方法可以直接使用moment.js做到这一点吗？

谢谢

我创建自定义 keycloak 登录屏幕。

我从keycloak网页下载

\n

服务器 独立服务器分布

\n

并复制到keycloak-8.0.2\\themes\\keycloak\ C:\\xx\\configuration\\keycloak\\theme\\my-themen然后我打开login文件夹，在那里我有

- theme.properties\n- resources\n

在资源中，我改变login.css并且一切正常，我可以改变颜色，img 等......

到目前为止，在login我没有的文件夹中login.ftl，我从下载的文件中获取并复制一个keycloak。\n但是现在，当我尝试加载我的页面时，我得到了

This page isn\xe2\x80\x99t working \nlocalhost.test.net is currently unable to handle this request.\nHTTP ERROR 500\n

如果我删除这个文件，一切正常。

我需要这个文件来更改 html 中的一些内容

这是theme.properties文件

parent=base\nimport=common/keycloak\n\nstyles=node_modules/patternfly/dist/css/patternfly.min.css node_modules/patternfly/dist/css/patternfly-additions.min.css lib/zocial/zocial.css css/login.css\nmeta=viewport==width=device-width,initial-scale=1\n\nkcHtmlClass=login-pf\nkcLoginClass=login-pf-page\n\nkcLogoLink=http://www.keycloak.org\n\nkcLogoClass=login-pf-brand\n\nkcContainerClass=container-fluid\nkcContentClass=col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3 col-lg-6 col-lg-offset-3\nkcContentWrapperClass=row\n\nkcHeaderClass=login-pf-page-header\nkcFeedbackAreaClass=col-md-12\nkcLocaleClass=col-xs-12 col-sm-1\nkcAlertIconClasserror=pficon pficon-error-circle-o\n\nkcFormAreaClass=col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-8 col-lg-offset-2\nkcFormCardClass=card-pf\nkcFormCardAccountClass=login-pf-accounts\nkcFormSocialAccountClass=login-pf-social-section\nkcFormSocialAccountContentClass=col-xs-12 col-sm-6\nkcFormSocialAccountListClass=login-pf-social list-unstyled login-pf-social-all\nkcFormSocialAccountDoubleListClass=login-pf-social-double-col\nkcFormSocialAccountListLinkClass=login-pf-social-link\nkcFormHeaderClass=login-pf-header\n\nkcFeedbackErrorIcon=pficon …