角9 videogular2无法解析为NgModule

Question

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

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

29导出声明类VgCoreModule {VgCoreModule- error NG6002:出现在NgModule.imports of VideoPlayerModule中，但无法解析为NgModule类。

1导出声明类VgControlsModule {VgControlsModule- error NG6002:出现在NgModule.imports of VideoPlayerModule中，但无法解析为NgModule类。

1导出声明类VgOverlayPlayModule {~VgOverlayPlayModule- error NG6002:出现在VideoPlayerModule的NgModule.imports中，但无法解析为NgModule类

1导出声明类VgBufferingModule {~VgBufferingModule- error NG6002:出现在NgModule.imports of VideoPlayerModule中，但无法解析为NgModule类。

6导出声明类VgStreamingModule {~VgStreamingModule- error NG6002:出现在NgModule.imports of AppsModule中，但本身存在错误。

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

29出口级AppsModule ~~

**正在监听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
{
}

Answer 1

Videogular2还不支持角9。

您可以使用这个ngx-视频 (videogular2的叉)，直到添加支持为止，就像这个github问题中推荐的那样。

另一种选择是禁用常春藤，如另一个答案所示。然而，通过这样做，你将失去常春藤的所有好处。

Answer 2

默认情况下，enableIvy标志的值设置为true，从版本9开始。

"angularCompilerOptions"：{ "enableIvy"：false }

解决我的问题

Answer 3

我也有同样的问题，确保你已经安装了

1. 茨林特
2. 打字脚本

本地或全球

npm i -g tslint -f& npm -g类型记录-f