Using angular JS in existing MVC 5 application

Question

We are developing a new module in an existing .net MVC 5 project. I wanted to develop this using Angular 2.

Assuming there is a controller that renders a view on screen; there after that view uses angular JS to work.

I'm running into issues. I noticed after doing an npm install I got to see the node_modules and typings folder both to be excluded from the project something that doesn't happen when I just create an angular application, assuming it has to do something the web project. Secondly I cannot import the module without giving the actual physical path "Angular2/core" is a module it cannot find.

Also the application does not work gives the error

system.src.js:1154 GET http://sts.fb2/scripts/app/main 404 (Not Found)fetchTextFromURL @ system.src.js:1154(anonymous function) @ system.src.js:1710ZoneAwarePromise @ angular2-polyfills.js:589(anonymous function) @ system.src.js:1709(anonymous function) @ system.src.js:2734(anonymous function) @ system.src.js:3308(anonymous function) @ system.src.js:3575(anonymous function) @ system.src.js:3960(anonymous function) @ system.src.js:4419(anonymous function) @ system.src.js:4671(anonymous function) @ system.src.js:406ZoneDelegate.invoke @ angular2-polyfills.js:332Zone.run @ angular2-polyfills.js:227(anonymous function) @ angular2-polyfills.js:576ZoneDelegate.invokeTask @ angular2-polyfills.js:365Zone.runTask @ angular2-polyfills.js:263drainMicroTaskQueue @ angular2-polyfills.js:482F @ system-polyfills.src.js:1276H @ system-polyfills.src.js:1276q.when @ system-polyfills.src.js:1276T.run @ system-polyfills.src.js:1276t._drain @ system-polyfills.src.js:1276drain @ system-polyfills.src.js:1276e @ system-polyfills.src.js:1276 angular2-polyfills.js:332 Error: Error: XHR error (404 Not Found) loading http://sts.fb2/scripts/app/main(…)

Please can someone help me out to understand how one can go about implementing this ? A sample application will be really helpful

Thanks, Sneha

johnson johnson · Accepted Answer · 2016-11-17T05:17:45

System.config({
    map: {
        app: '/scripts/App',
    },
    packages: {
        app: {
            format: 'cjs',
            defaultExtension: 'js'
        }
    }
});

a) Add this code before you import main.js. you can use SystemJs Configuration, map the packages with extensions.

b) maybe you add angular2.js into your buddle list, and that will resort the order of js files, maybe that will cause this problem too. you can check your html file for ref scripts.

maybe you can see this.link

Using angular JS in existing MVC 5 application

1 Answers