I've got an ASP.NET MVC / Angular2 project which uses MSBuild to compile my Typescript files. The project contains the entire Angular2 source code and its NodeJS dependencies in addition to my Angular2 code (app.ts, etc.).
My problem is that MSBuild is compiling every Typescript file in the entire solution - including the Angular2 source code, its dependencies, and my app.ts code. I want to exclude any Typescript files located in the node_modules folder from compilation.
My understanding is that tsconfig.json files are generally responsible for excluding certain files or directories from being compiled (see this question), but that the .csproj files in ASP.NET project will supervene on tsconfig.json. So I'm trying to figure out what to write in the .csproj file to tell MSBuild and tsc.exe not to compile specific files or folders.
The MSBuild Typescript compiler options documentation is not helpful. Does anybody have any insight on this?
A .csproj file should only have your application files listed for compilation, if you have included anything from node_modules I would exclude that folder from your project. This is to prevent any weird compilation attempts by VS's TypeScript Compiler from that angle. Then, in your tsconfig.json you would have your exclude: ['node_modules', 'typings'] (if you are using @types instead of typings then obviously you won't have a typings folder). Same thing, just preventing the compiler from touching those folders.
Example tsconfig.json with the exclude in place:
{
"compileOnSave": true,
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": true,
"noImplicitAny": false,
"suppressImplicitAnyIndexErrors": true
},
"exclude": [
"node_modules", "typings"
]
}
To take things a step further and hopefully save you some time when you decide to deploy your app out I think you should consider the following:
When it comes to deployment or publishing - while you could publish the entire folder and it's subfolders it is immense and time consuming. There was another, similar, question where attempting the node_module publish locked up a dev's box and eventually crashed his VS.
Trying to manually find and include all the dependencies is a) very time consuming and b) likely to drive you crazy making sure everything is included and only once. I had considered doing such a thing and rejected it.
For better or worse npm and node_modules mixed in with Windows and ASP.NET means the path of least resistance and most gain is learning an additional set of tooling to bundle up your application. The documentation is a little shakey if you're, say, dumb enough to use Webpack 2 (in beta, which I did) but the results are that you can have your npm script task, gulp task, or whatever build out only what you need for deployment. I have a 150+MB node_modules folder and I end up with a 1MB (production) set of JS files at the end of the day (tree shaking is great and I love it).
The tools for consideration are SystemJSBuilder with GulpJS (if you're already using SystemJS this is a natural path to take), Rollup (this had an issue with TypeScript interfaces and the issue I filed was listed as known and without a good fix), Webpack, and I'm sure there are more that I'm forgetting and probably even tried.
There are a number of tutorials for each available, and each has a healthy community around them. The Angular team has a webpack tutorial which is a good start if you take that route: https://angular.io/docs/ts/latest/guide/webpack.html
The SystemJS builder team has their own documentation: https://github.com/systemjs/builder but I believe you'll need to combine it with gulp documentation to learn how that pieces together.
Rollup is a bit less developed so I used their documentation http://rollupjs.org/guide/ and examples such as https://github.com/manfredsteyer/angular2-aot-webpack2-rollup