Angular 6 应用程序：清单：行：1，列：1，意外标记

Question

构建代码并将其部署到 Azure 时会出现此错误。当代码是运行在本地使用 VSCode 时，这不会出现在控制台中。对此事的任何帮助表示赞赏。

清单文件代码：

{
    "name": "",
    "icons": [
        {
            "src": "assets/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        }
    ],
    "theme_color": "#ffffff",
    "background_color": "#ffffff",
    "display": "standalone"
}

文件在index.html中引用如下

<link rel="manifest" href="assets/manifest.json">

Answer 1

今天我在 Azure 上托管的 Angular 6 项目遇到了同样的错误。

这是我的解决方法：

在我的 "web.config" 文件中：

<configuration>
<system.webServer>
  <rewrite>
    <rules>
      <rule name="Angular" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
          <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        </conditions>
        <action type="Rewrite" url="/" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>

添加这些行：

<staticContent>
<mimeMap fileExtension=".json" mimeType="application/json" />
</staticContent>

结果：

<configuration>
<system.webServer>
<staticContent>
<mimeMap fileExtension=".json" mimeType="application/json" />
</staticContent>
  <rewrite>
    <rules>
      <rule name="Angular" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
          <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        </conditions>
        <action type="Rewrite" url="/" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>

这对我有用，希望对你也有用！ :)

相关话题：How to allow download of .json file with ASP.NET

Answer 2

通过在标签中使用 crossorigin="use-credentials" 修复了它。

<link rel="manifest" crossorigin="use-credentials" href="./assets/manifest.json">

Answer 3

尝试在名字中加一个名字属性记住它不应该是空的，包含空格不应该包含大写字母。

Answer 4

很高兴 crossorigin 属性对您的情况有所帮助。对于大多数其他人来说，这可能不会奏效。无论如何。

清单文件的缺失可能有多种原因导致此错误消息。除了缺少将其放在根目录中并在 html 文件的 head 中引用它之外，最常见的是您正在另一个环境中构建。

这些环境中的任何一个都有自己的配置。其中一些可能不会默认 wrap/pack 将 manifest.json 文件放入本地测试部署包中。

在 Angular 中，您通过使用 angular.json 文件中的指令将清单添加到资产来解决它："src/manifest.json" 在路径 projects/app/root/architect/build/options/assets 中

如下所示，要涵盖多个环境。不仅仅是 build。你的成熟度越高，你需要维护的人就越多。

Answer 5

我尝试了很多修复，none 成功了。经过多次磨牙，我发现 Azure 不提供 .json 作为静态文件。

所以我将以下内容添加到 web.config（摘录如下）。

<configuration>

  <system.webServer>

...

    <staticContent>
      <mimeMap fileExtension=".json" mimeType="application/json" />
      <mimeMap fileExtension=".webmanifest" mimeType="application/json" />
    </staticContent>

...

  </system.webServer>
</configuration>

除了 .webmanifest 文件扩展名的第二个 MIME 设置外，SO 上的许多解决方案都提到了此修复。

它只对包含第二个文件扩展名“.webmanifest”的我有效。

Answer 6

您需要将 mime 类型添加到您的服务器。扩展名 .webmanifest mime 类型 application/manifest+json

Answer 7

如果您对其他答案有疑问，可以使用此答案：

尝试先删除 mimetype，然后再将其添加到 web.config

（加入web.config）

    <staticContent>
       <remove fileExtension=".json"/>
       <mimeMap fileExtension=".json" mimeType="application/json" />
       <remove fileExtension=".webmanifest"/>
       <mimeMap fileExtension=".webmanifest" mimeType="application/json" />
    </staticContent>

Angular 6 应用程序：清单：行：1，列：1，意外标记

Angular 6 application : Manifest: Line: 1, column: 1, Unexpected token

manifest.json

angular6