ホーム>source

角型アプリケーションで奇妙なビルドエラーが発生しています。誰が私が間違っているのかを指摘できますか? ADAL.js角度パッケージを使用してAzure AD認証を統合しようとしています。私は adal-angular5 を使用しています  このため。

cliコマンド: ng serve

ERROR in node_modules/@angular/core/src/render3/ng_dev_mode.d.ts(9,11): error TS2451: Cannot redeclare block-scoped variable 'ngDevMode'. node_modules/adal-angular5/node_modules/@angular/core/src/render3/ng_dev_mode.d.ts(9,11): error TS2451: Cannot redeclare block-scoped variable 'ngDevMode'.

ng build --prod と併用する場合

ERROR in @angular\common\http\http.ts(62,2): Error during template compile of 'HttpClient' Function calls are not supported in decorators but 'ɵmakeDecorator' was called in 'Injectable' 'Injectable' calls 'ɵmakeDecorator'. node_modules/@angular/core/src/render3/ng_dev_mode.d.ts(9,11): error TS2451: Cannot redeclare block-scoped variable 'ngDevMode'. node_modules/adal-angular5/node_modules/@angular/core/src/render3/ng_dev_mode.d.ts(9,11): error TS2451: Cannot redeclare block-scoped variable 'ngDevMode'.

ここに私の角度バージョンの詳細があります

Angular CLI: 6.1.4
Node: 8.11.4
OS: win32 x64
Angular: 6.1.3
Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.7.4
@angular-devkit/build-angular     0.7.4
@angular-devkit/build-optimizer   0.7.4
@angular-devkit/build-webpack     0.7.4
@angular-devkit/core              0.7.4
@angular-devkit/schematics        0.7.4
@angular/cli                      6.1.4
@ngtools/webpack                  6.1.4
@schematics/angular               0.7.4
@schematics/update                0.7.4
rxjs                              6.2.2
typescript                        2.9.2
webpack                           4.9.2

参考のために私のapp.moudle.ts:

import { AuthService } from './services/auth.service';
import { AuthGuardService } from './services/auth-gurad.service';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { ProtectedComponent } from './protected/protected.component';
import { AuthCallbackComponent } from './auth-callback/auth- 
callback.component';
import { Adal5Service, Adal5HTTPService } from 'adal-angular5';
import { HttpClient } from '@angular/common/http';
const routes: Routes = [
{
   path:'',
   children: []
},
{
   path:'protected',
   component:ProtectedComponent,
   canActivate: [AuthGuardService]
},
{
   path:'auth-callback',
   component:AuthCallbackComponent
}
];
@NgModule({
declarations: [
  AppComponent,
  ProtectedComponent,
  AuthCallbackComponent
 ],
 imports: [
    BrowserModule,
    RouterModule.forRoot(routes)
 ],
 exports: [RouterModule],
 providers: [AuthGuardService, AuthService, Adal5Service,{ 
 provide:Adal5HTTPService, useFactory:Adal5HTTPService.factory, deps: 
 [HttpClient, Adal5Service] } ],
 bootstrap: [AppComponent]
 })
 export class AppModule { }

これが私のtsconfig.jsonです

{
  "compileOnSave": false,
  "compilerOptions": {
  "baseUrl": "./",
  "outDir": "./dist/out-tsc",
  "sourceMap": true,
  "declaration": false,
  "module": "es2015",
  "moduleResolution": "node",
  "emitDecoratorMetadata": true,
  "experimentalDecorators": true,
  "target": "es5",
  "typeRoots": [
     "node_modules/@types"
  ],
  "lib": [
  "es2017",
  "dom"
   ]
  }
 }

さらに参照が必要な場合はお知らせください。

あなたの答え
  • 解決した方法 # 1

    あなたはプロジェクトにAngular 6を使用しようとしているようですが、 adal-angular5  Angular 5に依存します。その結果、Angular 5とAngular 6の両方がインストールされ、それらのタイプ定義が競合しています。実行時にも問題が発生する場合があります。プロジェクトをAngular 5に切り替えるか、 adal-angular4 を試してください 、Angular 4以降をサポートすることになっています。

関連記事

  • 前へ java - JPAクエリ:サブクエリをグループ化条件に結合する
  • 次へ Elasticsearch Aggregationで最小日付と最大日付の間の時間を取得する方法は?