在使用 cli 生成的 Angular2 项目中导入 d3 的本地文件

Question

我正在尝试在 angular2 项目中加载本地 csv 文件(或 json 文件)。我已经尝试了其他SO问题(例如，这个)或github问题的一些变体，包括：

1.) 使用python -m SimpleHTTPServer(用于端口 8000)设置本地服务器，并执行：

d3.csv("http://127.0.0.1:8000/master_grades_lecture.csv", function(error, data){
console.log(data[0]);
});

当我这样做时，我不能只是在浏览器中导航到localhost：8000并看到web应用程序在index.html上工作，因为我一直在使用Angular cli来设置我的项目，而且似乎它只能在我运行时渲染ng serve(在端口4200上运行)。

2.) 当我尝试在端口 4200 上使用ng serve加载它时，我将上面的代码更改为，

d3.csv("master_grades_lecture.csv", function(error, data){
console.log(data[0]);
});

我收到与访问控制允许源相关的错误。

最后，在我编译时也有一些打字问题，当我搜索它们时，它们似乎并没有产生很多有用的见解：

src/app/grade-display

/grade-display.component.ts(20,41) 中的错误： 错误 TS2345：类型为"(错误：DSVRowString，数据：数字)=>void"的参数不可分配给类型为"(原始行：DSVRowString， 索引：数字，列：字符串[]) => DSVRowAny'。 类型"void"不是 可分配给类型"DSVRowAny"。

这些可能是也可能不是单独的问题。如果人们觉得需要，我很乐意提供一个可重现的例子，但我希望有人以前不得不处理这个问题，并且确切地知道这里发生了什么。请原谅这个话题的新鲜感。

更新可重现的示例可以在这里找到：

git clone https://github.com/Atticus29/whatismygrade.git
cd whatismygrade
git checkout SO
//create a test csv file in the app directory called master_grades_lecture.csv
rm package-lock.json
npm install
ng serve

导航到本地主机：4200/在浏览器中测试

Answer 1

我注意到的第一件事是你的@types/d3是错误的版本。
你有

"dependencies": {
...
"d3": "^4.13.0",
},
"devDependencies": {
...
"@types/d3": "5.0.0",

所以需要运行npm install --save-dev @types/d3@4.13.0它应该处理打字稿错误。

我没有尝试你的python服务器，但是运行ng serve后这段代码就可以工作了

d3.csv('http://localhost:4200/assets/master_grades_lecture.csv', function(error, data){
console.log('data', data);
});