Question

我有一个带有Angular 6，Typescript，webpack 4的项目。

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

这是我在webpack中的代码：

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

“资产”别名工作正常！

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

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

这是组件的构造函数：

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

我的import语句没有错误，所以我认为别名以某种方式起作用。

但是我在构造函数中遇到以下错误：

TS2709：不能将名称空间“ UtilsService”用作类型。

我必须在某处缺少一些配置，但无法弄清楚是什么？

任何帮助将不胜感激

编辑： 继肯姆斯基和戴维之后，我尝试了以下操作：

我在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”用作类型。

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

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

的更多信息

带有Angular的Webpack别名-无法将名称空间“ UtilsService”用作类型

1 个答案: