将angular2应用程序从VS2015移动到glassfish

时间:2016-04-14 15:49:17

标签: visual-studio-2015 glassfish angular config systemjs

我遇到SystemJS配置问题

我在VS2015中有一个有效的angular2应用程序(asp.net core 1.0)。我可以编译.ts文件并进行更改,不会发生错误。

我现在想将应用程序移动到glassfish 4.1 Web项目(充当生产服务器)但是当我移动整个wwwroot内容时 (所有.js)从VS2015到glassfish网络文件夹我都会看到404个。

这是我在VS2015中使用的Index.html文件:

<!DOCTYPE html>
<html>
<head>
    <base href="/">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="icon" href="data:;base64,iVBORwOKGO=" />
    <title>Procurement v1.0</title>
    <link src="libs/css/bootstrap.min.css" rel="stylesheet" />
    <link href="libs/css/case1.css" rel="stylesheet" />
    <!-- 1. Load libraries -->
    <script src="libs/es6-shim.min.js"></script>
    <script src="libs/system-polyfills.js"></script>
    <script src="libs/angular2-polyfills.js"></script>
    <script src="libs/system.js"></script>
    <script src="libs/Rx.js"></script>
    <script src="libs/angular2.dev.js"></script>
    <script src="libs/router.dev.js"></script>
    <script src="libs/http.dev.js"></script>
    <script src="libs/jquery.js"></script>
    <script src="libs/bootstrap.js"></script>
    <!-- 2. Configure SystemJS -->
    <script>
        System.config({
            packages: {
                appScripts: {
                    defaultExtension: 'js'
                },
                '@ngrx/store': {
                    main: 'index.js',
                    format: 'cjs'
                }
            },
            map: {
                '@ngrx/store': 'libs/storedist'
            }
        });
    </script>
    <script> 
        System.import('appScripts/app')
              .then(null, console.error.bind(console));
    </script>
</head>
<body>
    <router-app>Loading...</router-app>
</body>
</html>

当我将wwwroot内容复制到Glassfish时,我需要在所有脚本前面加上Web存档的名称(APPOCase1a),以便识别脚本。我还必须使用CDN for system.js,因为它根本没被识别。我还必须将System.import更改为指向实际的应用程序.js文件以便识别它,从而在Glassfish上生成以下index.html:

<!DOCTYPE html>
<html>
<head>
    <base href="/">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="icon" href="data:;base64,iVBORwOKGO=" />
    <title>Procurement v1.0</title>
    <link href="/APPOCase1a/libs/css/bootstrap.css" rel="stylesheet" />
    <link href="/APPOCase1a/libs/css/case1.css" rel="stylesheet" />
    <!-- 1. Load libraries -->
    <script src="/APPOCase1a/libs/es6-shim.min.js"></script>
    <script src="/APPOCase1a/libs/system-polyfills.js"></script>
    <script src="/APPOCase1a/libs/angular2-polyfills.js"></script>
   <script src="https://code.angularjs.org/tools/system.js"></script>
    <script src="/APPOCase1a/libs/Rx.js"></script>
    <script src="/APPOCase1a/libs/angular2.dev.js"></script>
    <script src="/APPOCase1a/libs/router.dev.js"></script>
    <script src="/APPOCase1a/libs/http.dev.js"></script>
    <script src="/APPOCase1a/libs/jquery.js"></script>
    <script src="/APPOCase1a/libs/bootstrap.js"></script>
    <!-- 2. Configure SystemJS -->
    <script>
        System.config({
            packages: {
                 '@ngrx/store': {
                    main: 'index.js',
                    format: 'cjs'
                }
            },
            map: {
                '@ngrx/store': 'libs/storedist'
            }
        });
    </script>
    <script> 
        System.import('/APPOCase1a/appScripts/app.js')
              .then(null, console.error.bind(console));
    </script>
</head>
<body>
    <router-app>Loading...</router-app>
</body>
</html>

以下是我在浏览器控制台中看到的内容:

Navigated to http://localhost:8080/APPOCase1a/
system.src.js:4597 GET http://localhost:8080/APPOCase1a/appScripts/product/product-home.component 404 (Not Found)I @ system.src.js:4597(anonymous function) @ system.src.js:4597ZoneAwarePromise @ angular2-polyfills.js:589(anonymous function) @ system.src.js:4597(anonymous function) @ system.src.js:4597(anonymous function) @ system.src.js:4597(anonymous function) @ system.src.js:4597(anonymous function) @ system.src.js:4597(anonymous function) @ system.src.js:4597(anonymous function) @ system.src.js:4597(anonymous function) @ system.src.js:4597ZoneDelegate.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:482ZoneTask.invoke @ angular2-polyfills.js:434
system.src.js:4597 GET http://localhost:8080/APPOCase1a/appScripts/home/home.component 404 (Not Found)I @ system.src.js:4597(anonymous function) @ system.src.js:4597ZoneAwarePromise @ angular2-polyfills.js:589(anonymous function) @ system.src.js:4597(anonymous function) @ system.src.js:4597(anonymous function) @ system.src.js:4597(anonymous function) @ system.src.js:4597(anonymous function) @ system.src.js:4597(anonymous function) @ system.src.js:4597(anonymous function) @ system.src.js:4597(anonymous function) @ system.src.js:4597ZoneDelegate.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:482ZoneTask.invoke @ angular2-polyfills.js:434
system.src.js:4597 GET http://localhost:8080/APPOCase1a/appScripts/po/po-generator-home.component 404 (Not Found)I @ system.src.js:4597(anonymous function) @ system.src.js:4597ZoneAwarePromise @ angular2-polyfills.js:589(anonymous function) @ system.src.js:4597(anonymous function) @ system.src.js:4597(anonymous function) @ system.src.js:4597(anonymous function) @ system.src.js:4597(anonymous function) @ system.src.js:4597(anonymous function) @ system.src.js:4597(anonymous function) @ system.src.js:4597(anonymous function) @ system.src.js:4597ZoneDelegate.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:482ZoneTask.invoke @ angular2-polyfills.js:434
system.src.js:4597 GET http://localhost:8080/APPOCase1a/appScripts/vendor/vendor-home.component 404 (Not Found)I @ system.src.js:4597(anonymous function) @ system.src.js:4597ZoneAwarePromise @ angular2-polyfills.js:589(anonymous function) @ system.src.js:4597(anonymous function) @ system.src.js:4597(anonymous function) @ system.src.js:4597(anonymous function) @ system.src.js:4597(anonymous function) @ system.src.js:4597(anonymous function) @ system.src.js:4597(anonymous function) @ system.src.js:4597(anonymous function) @ system.src.js:4597ZoneDelegate.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:482ZoneTask.invoke @ angular2-polyfills.js:434
system.src.js:4597 GET http://localhost:8080/APPOCase1a/appScripts/store/reducers 404 (Not Found)I @ system.src.js:4597(anonymous function) @ system.src.js:4597ZoneAwarePromise @ angular2-polyfills.js:589(anonymous function) @ system.src.js:4597(anonymous function) @ system.src.js:4597(anonymous function) @ system.src.js:4597(anonymous function) @ system.src.js:4597(anonymous function) @ system.src.js:4597(anonymous function) @ system.src.js:4597(anonymous function) @ system.src.js:4597(anonymous function) @ system.src.js:4597ZoneDelegate.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:482ZoneTask.invoke @ angular2-polyfills.js:434
angular2-polyfills.js:332 Error: XHR error (404 Not Found) loading http://localhost:8080/APPOCase1a/appScripts/product/product-home.component(…)ZoneDelegate.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:482ZoneTask.invoke @ angular2-polyfills.js:434
system.src.js:4597 GET http://localhost:8080/libs/storedist/index.js 404 (Not Found)I @ system.src.js:4597(anonymous function) @ system.src.js:4597ZoneAwarePromise @ angular2-polyfills.js:589(anonymous function) @ system.src.js:4597(anonymous function) @ system.src.js:4597(anonymous function) @ system.src.js:4597(anonymous function) @ system.src.js:4597(anonymous function) @ system.src.js:4597(anonymous function) @ system.src.js:4597(anonymous function) @ system.src.js:4597(anonymous function) @ system.src.js:4597ZoneDelegate.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:482ZoneTask.invoke @ angular2-polyfills.js:434

由于我是这个东西的菜鸟,我想知道是否有更简单的方法来移植这个应用程序,或修复配置。任何见解都将不胜感激。

1 个答案:

答案 0 :(得分:0)

经过几个小时的修补,我发现它是

<base href="/"> 

标签让我搞砸了。删除后,应用程序现在部分工作,但我现在仍然在html模板和img文件上获得404。我会进一步调查。