Question

我有一个json文件，我需要导入到我的Angular 2应用程序中。我已按照此How to Import json into TypeScript文章中的步骤操作，但我收到了“SyntaxError: Unexpected token :”错误。你觉得我做错了什么？

这是我的代码：

完整错误：

(index):28 Error: SyntaxError: Unexpected token :
        at eval (<anonymous>)
        at Object.eval (http://localhost:37967/Application/Settings.js:3:19)
        at eval (http://localhost:37967/Application/Settings.js:92:4)
        at eval (http://localhost:37967/Application/Settings.js:93:3)
        at eval (<anonymous>)
    Evaluating http://localhost:37967/appSettings.json
    Evaluating http://localhost:37967/Application/Settings.js
    Evaluating http://localhost:37967/Application/BaseComponent.js
    Evaluating http://localhost:37967/Application/Components/Home/Home.js
    Evaluating http://localhost:37967/Application/Module.js
    Evaluating http://localhost:37967/Application/Startup.js
    Error loading http://localhost:37967/Application/Startup.js

Settings.ts：

/// <reference path="../scripts/typescriptdefinitions/typings.d.ts" />
..
import * as appSettings from '../../appSettings.json';
..
    public static get AppSettings(): any{
        return <any>appSettings;
    }
..

typings.d.ts：

declare module "*.json" {
    const value: any;
    export default value;
}

appSettings.json：

{
  "AppSettings": {
    "Url": ...
  }
}

我已检查“网络”面板，文件已加载200 OK。 json内容也是有效的json。

Answer 1

您引用的示例旨在在CommonJS环境中运行，可能是Node。在这种情况下，require语句变为require("foo.json")语句。在节点中执行meta非常好：节点知道它不应该尝试执行 JSON文件。

但是，如果您没有在Node中加载CommonJS模块， 通常需要告诉捆绑器或加载器必须特别处理JSON文件。否则，该工具会认为您正在加载代码，并将尝试执行它。

您向我建议您使用SystemJS的错误消息。使用SystemJS，您希望使用json设置SystemJS配置，该配置将告诉SystemJS您要加载的文件应该使用meta: { "path/to/file": { loader: "json", }, },加载程序加载：

systemjs-plugin-json

您需要安装path/to/file。如果您有多个文件需要加载为json，project/config/*可能包含通配符。例如，我有project/config/，因此terraform.tfstate中的所有文件都被视为JSON。不幸的是，SystemJS支持的通配符没有很好的文档记录，因此您可能必须尝试查看哪些适用于您。

尝试导入json文件时出错

1 个答案: