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

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로 업그레이드한 후 "Cannot find name '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에서.아들아, 나는

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

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

declare var require: NodeRequire;

그래서 헷갈리네요.

그나저나, 저는 항상 다음과 같은 경고를 받습니다.

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

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

문제(유형 스크립트에서 TS2304 오류 발생: cannot name 'require'라는 이름을 찾을 수 없음)는 노드에 대한 유형 정의가 설치되어 있지 않다는 것입니다.

프로젝티브 젠(gen) 포함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" ]
...

제가 놓친 것이 있으면 댓글을 달아주시면 제가 답변을 수정하겠습니다.

Angular 7+에서 작동합니다.

---

저는 같은 문제에 직면하고 있었습니다, 저는 덧붙이고 있었습니다.

"types": ["node"]

루트 폴더의 ttsconfig.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"
  ]
}

드디어 이에 대한 해결책을 얻었습니다. 앱 모듈 파일을 확인하십시오.

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;상기 코드로

여전히 답을 확신할 수 없지만 가능한 해결 방법은 다음과 같습니다.

import * as Chart from 'chart.js';

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

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

한 가지 궁금한 점은 이 문제가 "요구 사항()을 찾을 수 없음"이라는 것입니다. ts-node로 추출할 때는 발생하지 않습니다.

추가했습니다.

"types": [ 
   "node"
]

내 tsconfig 파일과 metsconfig.json 파일은 다음과 같습니다.

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

오류가 발생하는 파일의 맨 위에 다음 행을 추가합니다.

declare var require: any

이동했습니다.tsconfig.json파일을 새 폴더에 저장하여 프로젝트를 재구성합니다.

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

그래서 그냥 경로를 업데이트합니다.

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

로.

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

node_modules에 대한 경로가 tsconfig.json의 새 위치에서 확인되도록 하려면 다음과 같이 하십시오.

언급URL : https://stackoverflow.com/questions/43104114/cannot-find-name-require-after-upgrading-to-angular4