title: Webpack alias with Angular - Cannot use namespace 'UtilsService' as a type
body: <p>I have a project with Angular 6, Typescript, webpack 4.</p>
  
  <p>I want to use <a href="https://webpack.js.org/configuration/resolve/#resolve-alias" rel="nofollow noreferrer">alias in webpack</a> in order to make my import statement clearer.</p>
  
  <p>This is the code I have in webpack:</p>
  
  <pre><code>resolve: {
    alias: {
      assets: `${helpers.root('src/assets/')}`,
      app: `${helpers.root('src/app/')}`
    },
  }
  </code></pre>
  
  <p><strong>The "assets" alias is working fine !</strong></p>
  
  <p>I use the "app" alias in this way within the code of a component:</p>
  
  <pre><code>import { UtilsService } from 'app/_services/utils.service';
  </code></pre>
  
  <p>And this is the constructor of the component:</p>
  
  <pre><code>constructor( @Inject( UtilsService ) private utils: UtilsService, ) {
  }
  </code></pre>
  
  <p>I don't have an error on the import statement, so I guess that the alias works in some way.</p>
  
  <p>But I have the following error in the constructor:</p>
  
  <p><strong>TS2709: Cannot use namespace 'UtilsService' as a type.</strong></p>
  
  <p>I must be missing some configuration somewhere but can't figure out what ?</p>
  
  <p>Any help will be greatly appreciated</p>
  
  <hr>
  
  <p><strong>EDIT:</strong>
  <strong>Following kemsky and David comment this is what I tried:</strong></p>
  
  <p>I added the following in tsconfig.json:</p>
  
  <pre><code>"baseUrl": ".",
  "paths": {
    "@app": ["src/app/"] // This mapping is relative to "baseUrl"
  }
  </code></pre>
  
  <p>I modify webpack.config.js to have:</p>
  
  <pre><code>resolve: {
    alias: {
      assets: `${helpers.root('src/assets/')}`,
      '@app': `${helpers.root('src/app/')}`
    },
  }
  </code></pre>
  
  <p>And I tried to import using:</p>
  
  <pre><code>import { UtilsService } from 'app/_services/utils.service';
  </code></pre>
  
  <p>I still have the same error in the constructor of my component:</p>
  
  <pre><code>constructor( private utils: UtilsService, ) {}
  </code></pre>
  
  <p><strong>TS2709: Cannot use namespace 'UtilsService' as a type.</strong></p>
  
  <p>If I change the import statement to something that don't exist, I have a the following error:</p>
  
  <pre><code>Module not found: Error: Can't resolve '@DONT_EXIST/_services/utils.service'
  </code></pre>
  
  <p>Which makes me think that the problem is with tsconfig.</p>
  
  <p>Note:</p>
  
  <p>I'm using awesome-typescript-loader, maybe it's linked, this is how I load tsconfig.json inside webpack.config.js</p>
  
  <pre><code>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$/]
      },
  </code></pre>