时间戳

首页 > 解决方案 > angular 9 videogular2 无法解析为 NgModule

angular - angular 9 videogular2 无法解析为 NgModule

问题描述

当我通过官方教程安装它时，我正在开发一个 angular 9 应用程序并在集成 videogular2 时遇到问题，一切都很好，直到我尝试为项目服务然后我得到这些错误

node_modules/videogular2/src/core/core.d.ts:29:22 中的错误 - 错误 NG6002：出现在 VideoPlayerModule 的 NgModule.imports 中，但无法解析为 NgModule 类

29 export declare class VgCoreModule { ~~~~~~~~~~~~ node_modules/videogular2/src/controls/controls.d.ts:1:22 - 错误NG6002：出现在VideoPlayerModule的NgModule.imports中，但可以不能解析为 NgModule 类

1 export declare class VgControlsModule { ~~~~~~~~~~~~~~~~ node_modules/videogular2/src/overlay-play/overlay-play.d.ts:1:22 - 错误NG6002：出现在VideoPlayerModule 的 NgModule.imports，但无法解析为 NgModule 类

1 export declare class VgOverlayPlayModule { ~~~~~~~~~~~~~~~~~~~ node_modules/videogular2/src/buffering/buffering.d.ts:1:22 - 错误NG6002：出现在NgModule VideoPlayerModule 的 .imports，但无法解析为 NgModule 类

1 导出声明类 VgBufferingModule { ~~~~~~~~~~~~~~~~~~ node_modules/videogular2/src/streaming/streaming.d.ts:6:22 - 错误 NG6002：出现在 NgModule.imports VideoPlayerModule，但无法解析为 NgModule 类

6 export declare class VgStreamingModule { ~~~~~~~~~~~~~~~~~ src/app/apps/video-player/video-player.module.ts:42:14 - 错误NG6002：出现在AppsModule 的 NgModule.imports，但本身有错误

42 导出类 VideoPlayerModule ~~~~~~~~~~~~~~~~~ src/app/apps/apps.module.ts:29:14 - 错误NG6002：出现在AppModule的NgModule.imports中，但是本身有错误

29 导出类AppsModule ~~~~~~~~~~

** Angular Live Development Server 正在监听 localhost:7777，在http://localhost:7777/上打开浏览器**

这是我的 package.json 文件

{
"name": "test",
"version": "9.0.0",
"scripts": {
    "ng": "ng",
    "start": "ng serve --open",
    "start-hmr": "ng serve --configuration hmr --source-map=false --hmr-warning=false",
    "start-hmr-sourcemaps": "ng serve --configuration hmr --source-map=true --hmr-warning=false",
    "build": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --dev",
    "build-stats": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --dev --stats-json",
    "build-prod": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --prod",
    "build-prod-stats": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --prod --stats-json",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "bundle-report": "webpack-bundle-analyzer dist/stats.json"
},
"private": true,
"dependencies": {
    "@agm/core": "1.1.0",
    "@angular/animations": "9.0.0",
    "@angular/cdk": "9.0.0",
    "@angular/common": "9.0.0",
    "@angular/compiler": "9.0.0",
    "@angular/core": "9.0.0",
    "@angular/flex-layout": "9.0.0-beta.29",
    "@angular/forms": "9.0.0",
    "@angular/material": "9.0.0",
    "@angular/material-moment-adapter": "9.0.0",
    "@angular/platform-browser": "9.0.0",
    "@angular/platform-browser-dynamic": "9.0.0",
    "@angular/router": "9.0.0",
    "@auth0/angular-jwt": "4.0.0",
    "@ngrx/effects": "8.6.0",
    "@ngrx/router-store": "8.6.0",
    "@ngrx/store": "8.6.0",
    "@ngrx/store-devtools": "8.6.0",
    "@ngx-translate/core": "12.0.0",
    "@swimlane/dragula": "3.8.0",
    "@swimlane/ngx-charts": "13.0.2",
    "@swimlane/ngx-datatable": "16.0.3",
    "@swimlane/ngx-dnd": "8.1.0",
    "@types/prismjs": "1.16.0",
    "angular-calendar": "0.28.2",
    "angular-in-memory-web-api": "0.9.0",
    "chart.js": "2.9.3",
    "classlist.js": "1.1.20150312",
    "d3": "5.15.0",
    "date-fns": "2.9.0",
    "hammerjs": "2.0.8",
    "lodash": "4.17.15",
    "moment": "2.24.0",
    "ng2-charts": "2.3.0",
    "ngrx-store-freeze": "0.2.4",
    "ngx-bar-rating": "^1.1.0",
    "ngx-color-picker": "8.2.0",
    "ngx-cookie-service": "2.3.0",
    "ngx-spinner": "9.0.1",
    "perfect-scrollbar": "1.4.0",
    "prismjs": "1.19.0",
    "rxjs": "6.5.4",
    "tslib": "1.10.0",
    "videogular2": "^6.1.1",
    "web-animations-js": "2.3.2",
    "zone.js": "0.10.2"
},
"devDependencies": {
    "@angular-devkit/build-angular": "0.900.1",
    "@angular/cli": "9.0.1",
    "@angular/compiler-cli": "9.0.0",
    "@angular/language-service": "9.0.0",
    "@angularclass/hmr": "2.1.3",
    "@types/core-js": "2.5.3",
    "@types/jasmine": "3.5.2",
    "@types/jasminewd2": "2.0.8",
    "@types/lodash": "4.14.149",
    "@types/node": "12.12.6",
    "codelyzer": "5.2.1",
    "jasmine-core": "3.5.0",
    "jasmine-spec-reporter": "4.2.1",
    "karma": "4.3.0",
    "karma-chrome-launcher": "3.1.0",
    "karma-coverage-istanbul-reporter": "2.1.1",
    "karma-jasmine": "2.0.1",
    "karma-jasmine-html-reporter": "1.5.1",
    "protractor": "5.4.3",
    "ts-node": "8.3.0",
    "tslint": "5.18.0",
    "typescript": "3.7.5",
    "webpack-bundle-analyzer": "3.6.0"
}

}

这是我的模块

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

import { VideoPlayerComponent } from './video-player.component';
import { CommonModule } from '@angular/common';
import { MatCardModule } from '@angular/material/card';

import { VgCoreModule } from 'videogular2/core';
import { VgControlsModule } from 'videogular2/controls';
import { VgOverlayPlayModule } from 'videogular2/overlay-play';
import { VgBufferingModule } from 'videogular2/buffering';
import { VgStreamingModule } from 'videogular2/streaming';

import { AuthGuard } from '../auth/auth.guards/auth.guard';


const routes = [
    {
        path     : 'video',
        component: VideoPlayerComponent,
        canActivate: [AuthGuard]
        // resolve  : {
        //     profile: ProfileService
        // }
    }
];
@NgModule({
    declarations: [VideoPlayerComponent],
    imports: [
        CommonModule,
        MatCardModule,

        VgCoreModule,
        VgControlsModule,
        VgOverlayPlayModule,
        VgBufferingModule,
        VgStreamingModule,
        RouterModule.forChild(routes)

    ]
})
export class VideoPlayerModule
{
}

标签： angulartypescriptvideogular2

解决方案

Videogular2 还不支持 Angular 9。

在添加支持之前，您可以使用这个ngx-videogular （videogular2 的分支），如此github 问题中所建议的那样。

另一种选择是禁用常春藤，如另一个答案中所示。但是，这样做会失去 Ivy 的所有好处。

推荐阅读