ASP.NET 5, referencing angular2 in node_modules

[chickencoding123]

I have the following solution structure:

-WebApplication
--->project.json
--->package.json
.....
------>node_modules
.....
------>wwwroot
.....
--------->ts
------------>main.ts
------------>tsconfig.json
------------>tstypings.json
.....

inside of main.ts, i have to reference angular2 like the following:

import {bootstrap}    from '../../../node_modules/angular2/platform/browser';
import {Component}    from '../../../node_modules/angular2/core';

@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>'
})
export class MyApp{ }
bootstrap(MyApp);`

Why can't I use what angular suggest for imports:

`import {Component} from 'angular2/core';

Their article: https://angular.io/docs/ts/latest/quickstart.html

Furthermore, what i already have only works at design time. Once i run the project, inside of browser i get 404 not found for both browser and core. Apparently there is an ajax call to download both of these files, which fails. I'm not sure how the URL should even look like as that referencing is what i found to let me even build the project and not complaining about modules not found. However, it's not working at run-time.

Any ideas on what's causing this issues?

[mhegazy]

Why can't I use what angular suggest for imports:
`import {Component} from 'angular2/core';

why can't u indeed. what is the error you are getting?

[chickencoding123]

So with my own way of referencing the modules (aka full path), i get the solution built. When i run it, browsers (chrome, FF, IE), try to download those referenced modules which all fail with 404 not found.

If i reference it the way angular2 suggests, then solution won't build. With typescript compiler complaining modules not found (for both core and browser).

[chickencoding123]

Another thing i noticed is that node_modules is being entirely ignored at run-time. This means designer will find the modules (one way or another), but the folder node_modules is transparent to the browsers. If i place a random .js file and reference it via a script tag, it fails with the same 404 not found. So i'm not sure if all of these are the same problem, or i'm looking at multiple issues with asp.net 5 and typescript referencing.

[mhegazy]

U do not need the full path. Can u share a sample I can look at.

[chickencoding123]

I also asked a question here http://stackoverflow.com/questions/36609671/angular2-with-mvc6-browsers-cant-access-scripts-inside-of-node-modules

As for the code sample, it's already part of this thread. Original post has it and it also shows the folder structure.

[mhegazy]

I am more interested in why did you write it this way. the sample should have been:

import {bootstrap}    from 'angular2/platform/browser';
import {Component}    from 'angular2/core';

@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>'
})
export class MyApp{ }
bootstrap(MyApp);`

Stackoverflow is a better place for these sorts of questions. this repo is mainly for documentation bugs in http://www.typescriptlang.org/docs/handbook/basic-types.html

[chickencoding123]

I'm not sure if you understood the problem. I explained why it's written that way and asking how to fix it, so i can write it the way it should be.

[mhegazy]

for compiler/language bugs: https://github.com/Microsoft/TypeScript

I did not. and i am unable to get any clarifications from you over the past two days.

[chickencoding123]

So found out my issue, if i go to tsconfig.json and remove the keyworkd "module" from the the compiler options, it allows for referencing the way it should be:

import {Component} from 'angular2/core';

instead of:

import {Component} from '../../../node_modules/angular2/core';

However, doing this will cause the ts compiler to use commonjs for module loading as its default option. This will break while ran in browser. So adding 'module' option will not allow to run the application and removing it will break in the browser with "module not found".

[mhegazy]

aah. Add "moduleResolution": "node" to your tsconfig.json.

[chickencoding123]

yes just found and tried microsoft/TypeScript#5304

As much as i wanted it to work, it didn't. still having the same issue.

[mhegazy]

As much as i wanted it to work, it didn't. still having the same issue.

What is the issue?