Angular4로 업그레이드 한 후 'require'이름을 찾을 수 없습니다.

Angular 프로젝트에서 Chart.js를 사용하고 싶습니다. 이전 Angular2 버전에서는 다음과 같은 'chart.loader.ts'를 사용하여이 작업을 잘 수행했습니다.

export const { Chart } = require('chart.js');

그런 다음 구성 요소 코드에서

import { Chart } from './chart.loader';

그러나 cli 1.0.0 및 Angular 4로 업그레이드 한 후 " 'require'이름을 찾을 수 없습니다."라는 오류가 발생합니다.

오류를 재현하려면 :

ng new newapp
cd newapp
npm install chart.js --save
echo "export const { Chart } = require('chart.js');" >> src/app/chart.loader.ts
ng serve

내 'tsconfig.json'에는

"typeRoots": [
  "node_modules/@types"
],

그리고 'node_modules/@types/node/index.d.ts'에는 다음이 있습니다.

declare var require: NodeRequire;

그래서 혼란 스럽습니다.

BTW, 나는 끊임없이 경고를 만난다.

[tslint] The selector of the component "OverviewComponent" should have prefix "app"(component-selector)

내 '.angular-cli.json'에 "접두사": ""를 설정했지만. 원인이 'angular-cli.json'에서 '.angular-cli.json'으로 변경 되었기 때문일까요?

문제 ( typescript 오류 TS2304 : 찾을 수 없음 'require'를 찾을 수 없음에 설명 된대로 )는 노드에 대한 유형 정의가 설치되지 않았다는 것입니다.

예상 genned를 사용하는 with @angular/cli 1.x경우 특정 단계는 다음과 같아야합니다.

1 단계 :

@types/node다음 중 하나로 설치 하십시오.

- npm install --save @types/node
- yarn add @types/node -D

2 단계 : src / tsconfig.app.json 파일을 편집 하고 "types": []이미 있어야 하는 빈 위치에 다음을 추가합니다 .

...
"types": [ "node" ],
"typeRoots": [ "../node_modules/@types" ]
...

빠진 내용이 있으면 댓글을 달면 답을 수정하겠습니다.

마지막으로 이에 대한 해결책을 찾았습니다. 내 앱 모듈 파일을 확인하십시오.

import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModule } from '@angular/material';
import 'hammerjs';
import { ChartModule } from 'angular2-highcharts';
import * as highcharts from 'highcharts';
import { HighchartsStatic } from 'angular2-highcharts/dist/HighchartsService';

import { AppRouting } from './app.routing';
import { AppComponent } from './app.component';

declare var require: any;


export function highchartsFactory() {
      const hc = require('highcharts');
      const dd = require('highcharts/modules/drilldown');
      dd(hc);

      return hc;
}

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    AppRouting,
    BrowserAnimationsModule,
    MaterialModule,
    ChartModule
  ],
  providers: [{
      provide: HighchartsStatic,
      useFactory: highchartsFactory
    }],
  bootstrap: [AppComponent]
})
export class AppModule { }

declare var require: any;위의 코드에서 주목 하십시오.

Angular 7 이상에서 작동합니다.

나는 같은 문제에 직면하고 있었고

"types": ["node"]

에 tsconfig.json 루트 폴더의.

src 폴더 아래에 tsconfig.app.json 이 하나 더 있었고 다음을 추가하여이 문제를 해결했습니다.

"types": ["node"]

에 tsconfig.app.json의 파일에서compilerOptions

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "types": ["node"]  ----------------------< added node to the array
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

저에게는 VSCode와 Angular 5를 사용하여 tsconfig.app.json의 유형에 "노드"만 추가하면되었습니다. 저장 하고 서버를 다시 시작 하십시오.

{
    "compilerOptions": {
    ..
    "types": [
      "node"
    ]
  }
  ..
}

한 가지 흥미로운 점은이 문제가 "요구를 찾을 수 없음 (")이며 ts-node로 실행할 때 발생하지 않는다는 것입니다.

여전히 대답은 확실하지 않지만 가능한 해결 방법은

import * as Chart from 'chart.js';

나는 추가했다

"types": [ 
   "node"
]

내 tsconfig 파일 에서 작동하며 tsconfig.json 파일은 다음과 같습니다.

  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",
    "module": "es2015",
    "types": [ 
      "node",
      "underscore"
    ]
  },  

오류를 제공하는 파일 맨 위에 다음 행을 추가하십시오.

declare var require: any

tsconfig.json프로젝트를 재구성하기 위해 파일을 새 폴더로 옮겼습니다 .

따라서 typeRootstsconfig.json의 속성 내에서 node_modules / @ types 폴더에 대한 경로를 확인할 수 없었습니다.

따라서 경로를 업데이트하십시오.

"typeRoots": [
  "../node_modules/@types"
]

에

"typeRoots": [
  "../../node_modules/@types"
]

tsconfig.json의 새 위치에서 node_modules에 대한 경로가 확인되도록하려면