Question

我想加载文件的内容，并在构建时将其作为字符串在TypeScript中注入。我知道这段代码通常是服务器代码，但我想要的是有一个构建步骤来读取文件并将其内容作为字符串注入。

import { readFileSync } from 'fs';
import { Component } from '@angular/core';

@Component({
  template: `<pre>${readFileSync('./example.code')}</pre>`
})
export class ExampleComponent { }

假设example.code只有"Hello World"，我希望将此文件构建为：

template: `<pre>"Hello World"</pre>`

我发现babel-plugin-static-fs我认为应该允许我这样做，但我最初使用ng（angular-cli）来构建项目。我完成了ng eject并更新了webpack：

module: {
  rules: [
    /* snip */
    {
      "test": /\.ts$/,
      "use": [
        {
          loader: "babel-loader",
          options: {
            plugins: ['babel-plugin-static-fs']
          }
        },
        {
          "loader": "@ngtools/webpack"
        }, ] } ] }

然而，当我运行webpack时，我仍然得到

Cannot find module 'fs'

如果我颠倒了加载器的顺序，似乎babael不喜欢上面的@等注释中使用的@Component，这样加载器就不起作用了。

在Angular项目构建期间，有没有办法将文件作为静态内容加载？

Answer 1

此处的问题实际上与Angular为AoT创建和使用的tsconfig.app.json文件有关。这与用于实际构建按预期加载tsconfig.json的项目的@types/node分开。

如果您使用ng new创建了一个项目，则可以更改tsconfig.app.json：

- "types": [],
+ "types": ["node"],

这将使AoT编译器使用@types/node中的类型定义。

在构建期间在Angular中加载静态文件

1 个答案: