无法在 Angular 9 中导入 CanvasJS
Cannot import CanvasJS in Angular 9
CanvasJS 没有 npm 包,所以你必须手动下载它才能在本地使用它。
所以,我做到了,将 canvasjs.min.js 添加到我的项目并将其导入到我的组件中。但它不起作用:
ERROR in src/app/survey/survey.component.ts:8:27 - error TS2307: Cannot find module 'src/assets/canvasjs.min.js'.
import * as CanvasJS from 'src/assets/canvasjs.min.js';
~~~~~~~~~~~~~~~~~~~~~~~~~~~~
这是我的树文件夹:
- src
-- app
--- survey
---- survey.component.ts
-- assets
--- canvasjs.min.js
在我的组件中,我包含了这样的库:
import * as CanvasJS from 'src/assets/canvasjs.min.js';
这是我项目根目录下的 jsons 配置:
tsconfig.spec.json
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/spec",
"types": [
"jasmine",
"node"
]
},
"files": [
"src/test.ts",
"src/polyfills.ts"
],
"include": [
"src/**/*.spec.ts",
"src/**/*.d.ts"
]
}
tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"module": "esnext",
"moduleResolution": "node",
"importHelpers": true,
"target": "es2015",
"lib": [
"es2018",
"dom"
]
},
"angularCompilerOptions": {
"fullTemplateTypeCheck": true,
"strictInjectionParameters": true
}
}
tsconfig.app.json
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": []
},
"files": [
"src/main.ts",
"src/polyfills.ts"
],
"include": [
"src/**/*.d.ts"
]
}
摘自angular.json
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"angular-httpclient-example": {
"projectType": "application",
"schematics": {},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/angular-httpclient-example",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": true,
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"src/styles.css"
],
"scripts": [
]
}
我已经试过了:
- 添加angular.json
脚本中的路径
- 尽可能将 .js 移动到任何文件夹中
- 用绝对路径和相对路径更改我的路径
- 更改 baseUrl
我建议将其导入 angular.json
的 scripts 部分。
"scripts": [
.....
"/assets/canvasjs.min.js"
]
现在您应该可以将 canvas js 声明为 any
并且一切顺利。
declare const CanvasJS: any;
...
export class MyClass {
public chart = new CanvasJS.Chart("chartContainer", {
....
}
CanvasJS 没有 npm 包,所以你必须手动下载它才能在本地使用它。 所以,我做到了,将 canvasjs.min.js 添加到我的项目并将其导入到我的组件中。但它不起作用:
ERROR in src/app/survey/survey.component.ts:8:27 - error TS2307: Cannot find module 'src/assets/canvasjs.min.js'.
import * as CanvasJS from 'src/assets/canvasjs.min.js';
~~~~~~~~~~~~~~~~~~~~~~~~~~~~
这是我的树文件夹:
- src
-- app
--- survey
---- survey.component.ts
-- assets
--- canvasjs.min.js
在我的组件中,我包含了这样的库:
import * as CanvasJS from 'src/assets/canvasjs.min.js';
这是我项目根目录下的 jsons 配置: tsconfig.spec.json
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/spec",
"types": [
"jasmine",
"node"
]
},
"files": [
"src/test.ts",
"src/polyfills.ts"
],
"include": [
"src/**/*.spec.ts",
"src/**/*.d.ts"
]
}
tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"module": "esnext",
"moduleResolution": "node",
"importHelpers": true,
"target": "es2015",
"lib": [
"es2018",
"dom"
]
},
"angularCompilerOptions": {
"fullTemplateTypeCheck": true,
"strictInjectionParameters": true
}
}
tsconfig.app.json
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": []
},
"files": [
"src/main.ts",
"src/polyfills.ts"
],
"include": [
"src/**/*.d.ts"
]
}
摘自angular.json
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"angular-httpclient-example": {
"projectType": "application",
"schematics": {},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/angular-httpclient-example",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": true,
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"src/styles.css"
],
"scripts": [
]
}
我已经试过了:
- 添加angular.json 脚本中的路径
- 尽可能将 .js 移动到任何文件夹中
- 用绝对路径和相对路径更改我的路径
- 更改 baseUrl
我建议将其导入 angular.json
的 scripts 部分。
"scripts": [
.....
"/assets/canvasjs.min.js"
]
现在您应该可以将 canvas js 声明为 any
并且一切顺利。
declare const CanvasJS: any;
...
export class MyClass {
public chart = new CanvasJS.Chart("chartContainer", {
....
}