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

Question

我正在尝试在angular2项目中加载本地csv文件（或json文件）。我已经尝试了一些其他SO问题（例如，this）或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并看到webapp在index.html上工作，因为我一直在使用Angular cli来设置我的项目，而且它似乎只能当我运行ng serve（在端口4200上运行）时渲染。

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

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

我收到了Access-Control-Allow-Origin相关的错误。

最后，当我编译时，还有一些打字问题，当我搜索时似乎没有产生许多有用的见解：

src / app / grade-display / grade-display.component.ts（20,41）中的错误：错误TS2345：类型'（错误：DSVRowString，data：number）=> void'的参数不能分配给类型的参数'（rawRow：DSVRowString，index：number，columns：string []）=> 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

在浏览器中导航到localhost：4200 / test

Answer 1

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

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

所以需要运行应该处理打字稿错误的npm install --save-dev @types/[email protected]。

我没有尝试你的python服务器，但运行ng serve后，这段代码将起作用

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