Repository navigation
ASP.NET 5, referencing angular2 in node_modules #248
Description
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?
Activity
mhegazy commentedon Apr 13, 2016
why can't u indeed. what is the error you are getting?
chickencoding123 commentedon Apr 13, 2016
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 commentedon Apr 13, 2016
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 commentedon Apr 14, 2016
U do not need the full path. Can u share a sample I can look at.
chickencoding123 commentedon Apr 14, 2016
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 commentedon Apr 14, 2016
I am more interested in why did you write it this way. the sample should have been:
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 commentedon Apr 14, 2016
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 commentedon Apr 14, 2016
I did not. and i am unable to get any clarifications from you over the past two days.
chickencoding123 commentedon Apr 14, 2016
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 commentedon Apr 14, 2016
aah. Add
"moduleResolution": "node"to your tsconfig.json.chickencoding123 commentedon Apr 14, 2016
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 commentedon Apr 14, 2016
What is the issue?