angular2-webpack-starter | Angular 2 Webpack starter project

on Sentry documentation thera are instructions to integrate sentry with Angular2 CLI, but there is a lack of instructions to integrate sentry with Angrular2-webpack-starter. How to do it properly?

Please see the edit below

I have used the following package as a base for my VS Project -> https://github.com/AngularClass/angular2-webpack-starter

Everything worked nicely in Visual Studio code, I then tried to convert it to a Visual Studio 2017 Project (node.js web)

Now some problems appeared

VS seems to install TypeScript definitions into a special folder C:\Users\MyUser\AppData\Local\Microsoft\TypeScript\node_modules\@types

Additionally I included @types/node in my package.json which resulted in the appropriate node_modules folder.

now VS complains with error code TS4090 (Conflicting defintions for 'node').

Is there a possibility apart from deleting the folder in \AppData to tell VS which @types it should use?

The whole integration of TypeScript isn't really clear to me... Does MSBuild recognize an existing tsconfig.json? or would I have to configure it in in the project-file as seen here?

EDIT

I just noticed that I was actually editing a .js file. As soon as I changed the extension to .ts every warning and error vanished. I also got many typescript errors (like TS2307, can't find module '@angular/core') before changing the extension from .js to .ts

The file just did an import (from node)

Our project structure follows this: Angular2-webpack-starter.

Our project successfully compiles, build and can be seen in the browser. No problems here.

But when we try to run the test cases using karma and jasmine we are getting this error.

During my experience in angular I was forced to use four different ways of include 3-rd party library poliglot.js (for multilang).

So to be able use new Polyglot(...) in my Lang class:

I'm using the Angular2/Angular4 to build the application and I'm getting these errors when I'm running command "npm install".

I wanted to start my angular2 app on webpack first time, and I get : ERROR in Path must be string. Received undefined webpack: failed to compile, that's the package.json`

In my app, I want to use dropzone.js

So, I installed dropzone by npm install --save-dev dropzone

And I include import this library in my polyfills.browser.ts file

Update

After @developer033 mentioned, I am running npm run server:prod and app is running in the prod mode. But I am not sure, how do I verify it is AOT optimized?

If I inspect main.bundle.js in to check if it has code for main.browser.aot.ts:

I see is of main.browser.ts and not of main.browser.aot.ts So I am not sure wheter I am using AOT build or not.

Original Post

Ok, I am able to compile my Angular2 project in AOT mode with Webpack and it creates two folder one is "dist" and other is "compiled", but I am not sure how to run the AOT project after compiling.

Build Command:

"build:aot:prod": "npm run clean:dist && npm run clean:aot && webpack --config config/webpack.prod.js --progress --profile --bail"

After compile, I run the command :

npm run webpack-dev-server

Now the app runs but I am not sure whether it is even utilizing AOT compiled code or not. I see no difference in both AOT and non AOT app in the browser.

AOT:

Without AOT:

tsconfig.webpack.json:

My Angular application is currently at 4.1.3 with Typescript@2.0.3. I read that with Typescript greater than 2.0, @types should be used.

Currently I have typings installed in the application. To migrate to using @types, I have 3 questions:

1.Should I simply remove typings from package.json and tsconfig.json? and install @types packages?

1. How do i decide what @types packages to install for my application?
2. Also should I delete typings.json file?

package.json: