CODEWITHSUNDEEP
angularjstomcatangular
Shruti Srivastava
Shruti Srivastava

Reputation: 165

running angularjs 2 application on apache tomcat

I had an angularjs application running on apache tomcat. I tried using the upgrade adapter to use both angular1 and angular2 but as soon as i remove the ng-app directive my application stops working despite having used the upgrade adapter to bootstrap the app and the subsequent step smentioned in the migration guide.I am not getting any errors on the console either. It is just blank.

Is there any way this can be done on tomcat?, so far I have only seen sample angular2 applications running on the npm lite-server.

index.html

<!-- inject:system:js --><script src="/app/dist/system.src.js"></script><!-- endinject -->
    <!-- inject:router:js --><script src="/app/dist/router.dev.min.js"></script><!-- endinject -->
   <!-- inject:systemjs:js --><script src="/app/dist/systemjs.config.js"></script><!-- endinject -->

<base href="/index.html">

<my-app></my-app>
</body>
</html>

systemjs.config.js

     (function(global) {
// map tells the System loader where to look for things
var map = {
    'app':                        'app', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
};
var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
];
// Individual files (~300 requests):
function packIndex(pkgName) {
    packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
}
// Bundled (~40 requests):
function packUmd(pkgName) {
    packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
};
// Most environments should use UMD; some (Karma) need the individual index files
var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
// Add package entries for angular packages
ngPackageNames.forEach(setPackageConfig);
var config = {
    map: map,
    packages: packages
}
System.config(config);
})(this);
System.import('/app/main.js').then(null, console.error.bind(console));

main.ts

 import { upgradeAdapter } from './upgrade-adapter';
 upgradeAdapter.bootstrap(document.body, ['utdApp']);

upgrade-adapter.ts

import { UpgradeAdapter} from '@angular/upgrade';
export const upgradeAdapter = new UpgradeAdapter();

Upvotes: 2

Views: 1487

Answers (1)

dfsq
dfsq

Reputation: 193271

Is there any way this can be done on tomcat?

Of course. Tomcat, Express, Apache, simplest node server - whatever webserver you prefer, it doesn't matter.

as soon as i remove the ng-app directive my application stops working... I am not getting any errors on the console either.

Sounds like you just need to bootstrap angular application properly. Check angular.bootstrap if you are need to bootstrap Angular 1 app angular.bootstrap(appRootNode, ['appModuleName']); until you migrate to Angular 2 bootstrap method.

Upvotes: 0

Related Questions