Angular build 加载资源失败 - TypeScript

当使用 Angular CLI 构建应用时，可能会遇到以下错误消息：

ERROR in ./src/app/app.component.ts
Module not found: Error: Can't resolve './my-image.png' in '/path/to/app/src/app'

这意味着 TypeScript（或其他构建工具）无法找到您的应用程序中引用的资源文件。本文将介绍解决此问题的方法。

检查文件路径

首先，请确认您的文件路径是否正确。例如，如果您引用的是位于 app 文件夹中的图片，则应该将路径指定为 ./app/my-image.png。./ 意味着文件位于当前文件夹中。请确保文件名的大小写正确。

添加文件类型

如果您的文件没有扩展名，则 TypeScript 将无法确定文件类型，因此可能无法正确地编译它。需要将文件名更改为带有扩展名的文件名，或者通过将其添加到 tsconfig.json 文件中来告知 TypeScript。例如：

{
  "compilerOptions": {
    "resolveJsonModule": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "outDir": "./dist/out-tsc",
    "baseUrl": "./",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "importHelpers": true,
    "target": "es2015",
    "module": "esnext",
    "typeRoots": [
      "node_modules/@types"
    ],
    "types": [
      "node"
    ]
  },
  "exclude": [
    "node_modules",
    "src/**/*.spec.ts",
    "src/**/*.e2e.ts",
    "src/environments/*.ts"
  ],
  "files": [
    "./typings.d.ts"
  ]
}

• resolveJsonModule：将 JSON 文件视为模块，并允许它们在 TypeScript 中导入。
• allowSyntheticDefaultImports：允许从没有默认导出的模块中导入模块。

添加文件到 assets 中

如果您的文件需要被打包到构建后的应用程序中，可以将其添加到 angular.json 文件中的 assets 列表中。例如：

{
  "projects": {
    "my-app": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/my-app",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets",
              {
                "glob": "**/*",
                "input": "src/my-assets",
                "output": "./my-assets"
              }
            ],
…

在上面的示例中，src/my-assets 中的所有文件都将被添加到构建后的 ./my-assets 文件夹中。

总结

使用 Angular CLI 构建应用时可能遇到资源加载失败的问题，这通常是由于 TypeScript 无法找到或编译资源文件。要解决此问题，可以检查文件路径、添加文件类型、将文件添加到资产列表等。