Webpack 别名 Angular - 不能使用命名空间 'UtilsService' 作为类型

Question

我有一个项目 Angular 6, Typescript, webpack 4.

我想使用 alias in webpack 以使我的导入语句更清晰。

这是我在 webpack 中的代码：

resolve: {
  alias: {
    assets: `${helpers.root('src/assets/')}`,
    app: `${helpers.root('src/app/')}`
  },
}

"assets" 别名工作正常！

我在组件代码中以这种方式使用 "app" 别名：

import { UtilsService } from 'app/_services/utils.service';

这是组件的构造函数：

constructor( @Inject( UtilsService ) private utils: UtilsService, ) {
}

我在 import 语句上没有错误，所以我猜别名以某种方式起作用。

但是我在构造函数中出现以下错误：

TS2709: 不能使用命名空间 'UtilsService' 作为类型。

我一定是在某处遗漏了一些配置，但不知道是什么？

任何帮助将不胜感激

编辑： 根据 kemsky 和 David 的评论，这是我尝试过的：

我在tsconfig.json中添加了以下内容：

"baseUrl": ".",
"paths": {
  "@app": ["src/app/"] // This mapping is relative to "baseUrl"
}

我修改webpack.config.js有：

resolve: {
  alias: {
    assets: `${helpers.root('src/assets/')}`,
    '@app': `${helpers.root('src/app/')}`
  },
}

我尝试使用以下方式导入：

import { UtilsService } from 'app/_services/utils.service';

我的组件的构造函数中仍然有同样的错误：

constructor( private utils: UtilsService, ) {}

TS2709: 不能使用命名空间 'UtilsService' 作为类型。

如果我将导入语句更改为不存在的内容，则会出现以下错误：

Module not found: Error: Can't resolve '@DONT_EXIST/_services/utils.service'

这让我认为问题出在 tsconfig 上。

注：

我正在使用 awesome-typescript-loader，也许它是链接的，这就是我在 webpack.config.js

中加载 tsconfig.json 的方式

module: {
  rules: [
    {
      enforce: 'pre',
      test: /\.ts$/,
      use: [
        {
          loader: 'tslint-loader'
        }
      ]
    },

    {
      test: /\.ts$/,
      use: [
        {
          loader: '@angularclass/hmr-loader',
          options: {
            pretty: !isProd,
            prod: isProd
          }
        },
        {
          loader: 'ng-router-loader',
          options: {
            loader: 'async-import',
            genDir: 'compiled',
            aot: AOT
          }
        },
        {
          loader: 'awesome-typescript-loader',
          options: {
            configFileName: 'tsconfig.json',
            useCache: !isProd
          }
        },
        {
          loader: 'angular2-template-loader'
        }
      ],
      exclude: [/\.(spec|e2e)\.ts$/]
    },

Answer 1

定义路径映射时，有必要添加'*'以便它适用于所有子路径（因为您实际上是在定义一个模式）

所以你的tsconfig.json应该包含

"baseUrl": ".",
"paths": {
  "@app/*": ["src/app/*"] // This mapping is relative to "baseUrl"
}

这样，所有匹配 @app/* 的模块，例如

import {x}  from '@app/<moduleName>;

将解析为

<baseUrl>/src/app/<moduleName>

有关模块分辨率的更多信息here

Webpack 别名 Angular - 不能使用命名空间 'UtilsService' 作为类型

Webpack alias with Angular - Cannot use namespace 'UtilsService' as a type

angular

typescript

webpack

alias

resolve