Không thể tìm thấy tên 'yêu cầu' sau khi nâng cấp lên Angular4

Tôi muốn sử dụng Chart.js trong dự án Angular của mình. Trong các phiên bản Angular2 trước, tôi đã làm tốt điều này bằng cách sử dụng 'chart.loader.ts' có:

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

Sau đó, trong mã thành phần tôi chỉ

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

Nhưng sau khi nâng cấp lên cli 1.0.0 và Angular 4, tôi gặp lỗi: "Không thể tìm thấy tên 'yêu cầu'".

Để tạo lại lỗi:

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

Trong 'tsconfig.json' của tôi, tôi có

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

Và trong 'node_modules/@types/node/index.d.ts' có:

declare var require: NodeRequire;

Vì vậy, tôi bối rối.

BTW, tôi liên tục gặp cảnh báo:

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

Mặc dù tôi đã đặt "tiền tố": "" trong '.angular-cli.json' của mình. Có thể do nguyên nhân thay đổi từ 'angle-cli.json' thành '.angular-cli.json'?

Vấn đề (như được nêu trong bản định kiểu gặp lỗi TS2304: không thể tìm thấy tên 'request' ) là các định nghĩa kiểu cho nút không được cài đặt.

Với một dự kiến ​​được tạo ra with @angular/cli 1.x, các bước cụ thể phải là:

Bước 1 :

Cài đặt @types/nodebằng một trong các cách sau:

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

Bước 2 : Chỉnh sửa tệp src / tsconfig.app.json của bạn và thêm tệp sau vào vị trí trống "types": [], tệp này đã có ở đó:

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

Nếu tôi bỏ lỡ bất cứ điều gì, hãy ghi lại một bình luận và tôi sẽ chỉnh sửa câu trả lời của mình.

Cuối cùng, tôi đã có giải pháp cho vấn đề này, hãy kiểm tra tệp mô-đun Ứng dụng của tôi:

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 { }

Chú ý declare var require: any;trong đoạn mã trên.

Sẽ hoạt động trong Angular 7+

Tôi đang đối mặt với cùng một vấn đề, tôi đã thêm

"types": ["node"]

tới tsconfig.json của thư mục gốc.

Có thêm một tsconfig.app.json trong thư mục src và tôi đã giải quyết vấn đề này bằng cách thêm

"types": ["node"]

đến tệp tsconfig.app.json dướicompilerOptions

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

Đối với tôi, sử dụng VSCode và Angular 5, chỉ phải thêm "nút" vào các loại trong tsconfig.app.json. Lưu và khởi động lại máy chủ.

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

Một điều gây tò mò là vấn đề này "không thể tìm thấy request (", không xảy ra khi thực hiện với ts-node

Vẫn không chắc chắn câu trả lời, nhưng một giải pháp khả thi là

import * as Chart from 'chart.js';

Tôi đã thêm

"types": [ 
   "node"
]

trong tôi tsconfig tập tin và nó làm việc cho tôi tsconfig.json tập tin trông giống như

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

Thêm dòng sau vào đầu tệp có lỗi:

declare var require: any

Tôi đã chuyển tsconfig.jsontệp vào một thư mục mới để cơ cấu lại dự án của mình.

Vì vậy, nó không thể giải quyết đường dẫn đến thư mục node_modules / @ styles bên trong typeRootsthuộc tính của tsconfig.json

Vì vậy, chỉ cần cập nhật đường dẫn từ

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

đến

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

Để đảm bảo rằng đường dẫn đến node_modules được giải quyết từ vị trí mới của tsconfig.json