First of all, I have it wired and working, but I am somewhat discontent with the result and have a feeling it can be improved.
(The current result can be found here - https://github.com/MarkKharitonov/Angular2WebpackNodeExpress/tree/v0.0.1.)
The directory structure is:
C:.
│ .gitignore
│ package.json
│ tsconfig.json
│ tslint.json
│ typings.json
│ webpack.config.js
│
├───dist
│ └───server
│ api.js
│ api.js.map
│ main.js
│ main.js.map
│
└───src
├───client
│ app.component.ts
│ index.html
│ main.ts
│ polyfills.ts
│ tsconfig.json
│ vendor.ts
│
└───server
api.ts
main.ts
tsconfig.json
Right now the dist folder has only the server side files compiled from ./src/server. They are placed there by the IntelliJ IDEA, because ./src/server/tsconfig.json requests compilation on save.
The client side bundling occurs in memory courtesy of webpack-dev-server. The ./src/client/tsconfig.json does not request compilation on save.
The things I dislike about my current setup are described here - https://github.com/MarkKharitonov/Angular2WebpackNodeExpress/tree/v0.0.1#problems, namely:
- webpack is going to take care of any plain .js files under ./src/client - they would be bundled and placed under ./dist/client automatically. But what about plain .js files under ./src/server ? Do I need a task runner for that (gulp, grunt, whatever ...) or is there a solution within webpack?
- I have three tsconfig.json files - ./src/client/tsconfig.json, ./src/server/tsconfig.json and ./tsconfig.json. The three files share most of the options, but not all. Right now I copy them in each of the three files - not very good.
- In addition, because the typings folder is at the root I have to start all the top level TypeScript files (.\src\client\main.ts, .\src\client\polyfills.ts, .\src\client\vendor.ts and .\src\server\main.ts) with
/// <reference path="../../typings/index.d.ts" />.
Hence the questions:
- Can webpack also handle the server side files, but differently from the client side ones? I.e. transpile - yes, copy to dist - yes, bundle - no? Please, bear in mind I am using webpack-dev-server.
- Is it possible to inherit tsconfig.json configuration so that I could avoid duplicating many options across the three files I have?
- Is it possible to avoid the inclusion of
/// <reference path="../../typings/index.d.ts" />in the top level TypeScript files when the file layout is similar to mine ?
I know these are three questions instead of one, but I feel they are all closely related and the answer to one could also be the answer to another.