Visual Studio 2017 shared typescript files in separate project using webpack and angular

Question

I've been searching the internet for answers to this but to no avail. Please bear with me as I'm new to webpack and all that comes with it.

I'm basically wanting several projects in my Visual Studio 2017 solution a bit like this:-

1. Angular with .net core web api project
2. Separate project with common typescript files only
3. Other web projects (not all Angular!)

So what I'm trying to get is basically my common (or shared) typescript into its own separate project so I don't have to copy each of the modules into the other projects. Currently I'm using a blank node.js project template to store my common typescript files (whether this is right/wrong/ok or not I do not know). My problem is that if I reference any file in this common project from my angular or other web projects (e.g. import { SomeClass } from '@myShared/someClass'; } and that file itself has any import statements in then I get an error from webpack...

Module parse failed: Unexpected token (9:7)
You may need an appropriate loader to handle this file type

However, if I copy this file to my angular or web projects then they all build fine and webpack doesn't spit out any errors... so I know the code for these files is ok.

This is the relevant part of my webpack config...

    resolve: {
        extensions: ['.js', '.ts'],
        plugins: [
            new TsConfigPathsPlugin('tsconfig.json', 'typescript')
        ]
    },
    output: {
        filename: '[name].js',
        publicPath: 'dist/'
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                include: [
                    /ClientApp/,
                    '../SharedTypescriptLibary/src'
                ],
                use: isDevBuild ? ['awesome-typescript-loader?silent=true', 'angular2-template-loader', 'angular2-router-loader'] : '@ngtools/webpack'
            },
            {
                test: /\.html$/,
                use: 'html-loader?minimize=false'
            },
            {
                test: /\.(css|scss)$/,
                loaders: ['to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize', 'sass-loader']
            },
            {
                test: /\.(png|jpg|jpeg|gif|svg)$/,
                use: 'url-loader?limit=25000'
            }
        ]
    },
    plugins: [
        new CheckerPlugin()
    ]

and here is my tsconfig.json...

{
  "atom": { "rewriteTsconfig": false },
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": ".",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
      "dom",
      "es6" 
    ],
    "module": "es2015",
    "moduleResolution": "node",
    "paths": {
      "@myShared/*": [ "../SharedTypescriptLibary/src/*" ],          
      "@src/*": [ "./ClientApp/*" ]
    },
    "skipDefaultLibCheck": true,
    "skipLibCheck": true, // Workaround for https://github.com/angular/angular/issues/17863. Remove this if you upgrade to a fixed version of Angular.
    "sourceMap": true,   
    "target": "es5",
    "types": [ "webpack-env" ]
  },
  "exclude": [
    "bin",
    "node_modules"
  ]
}

It was hoping that having the common typescript in a different project would only mean I needed to add the relative path for the common typescript source folder to the 'include' array in the module rules. Strange that it does work as long as in the the common typescript files there are no import statements!?!

I did try moving the 'include' to the tsconfig.json and removing it from the webpack config but I get the exact same problem/errors...

Can anyone see what I'm doing wrong here? Or if what I'm doing is even possible? Is webpack or awesome-typescript-loader getting in a twist or something?

Please help :)

Answer 1

Sorry for answering my own question, but after reading more webpack documentation I finally found a fix for this. It seems that if you add all the code paths in resolve.modules then it works - or at least for me it has.

This is the modification to the 'resolve' part of the above config which fixed it for me...

   resolve: {
        extensions: [
            '.js',
            '.ts'
        ],
        plugins: [
            new TsConfigPathsPlugin('./tsconfig.json', 'typescript')
        ],
        // this is the what fixed it for me, here specify paths where our code resides (including shared libraries etc...)
        modules: [
            path.resolve(__dirname, 'node_modules'),
            path.resolve(__dirname, 'ClientApp'),
            path.resolve(__dirname, '../SharedTypescriptLibary/src')
        ]            
    }

Finally I can have my shared typescript in a separate project! ;-)