当由system.src.js加载时，Angular 2 app获得404 core.js和browser.js

Question

我刚刚开始使用Angular2，我已经按照Angular2快速入门和教程进行了操作。

某些上下文...当用户单击我的webapp顶部导航栏中的链接时，它会发出服务器端请求。 返回浏览器的页面是Angular2应用程序（index.html）。 用户可以单击localhost主页应用程序或单击localhost / customer客户应用程序。 我不明白Angular2，更有可能是SystemJS，在加载/导入模块时如何处理URL的差异。

我的项目结构

当我加载主页时，角度代码按照预期呈现视图。 home index.html有System.config'packages'='/ home'，System.import引用'home / boot'。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="layout">
<head>
    <title>Home</title>
    <link href="http://maxcdn.bootstrapcdn.com/bootswatch/3.2.0/cerulean/bootstrap.min.css" rel="stylesheet" media="screen" />
    <script>
        System.config({
            packages: {
                // the browser url is http://localhost
                "/home": {
                    format: 'register',
                    defaultExtension: 'js'
                }
            }
        });
        // the browser url is http://localhost
        System.import('home/boot').then(null, console.error.bind(console));
    </script>
</head>
<body>
<div layout:fragment="content">
    <div>
        <p th:text="#{home.welcome(${name})}">Welcome Message</p>
    </div>
    <div>
        <!-- ANGULAR HOME APP -->
        <home>Loading...</home>
    </div>      
</div>
</body>
</html>

当我加载客户页面时，浏览器获得404加载browser.js和core.js. system.src.js找不到localhost / customer / angular2 / platform / browser.js或localhost / customer / angular2 / core.js。 这些导入在我的boot.ts和customer.component.ts中定义。

boot.ts

import {bootstrap}    from 'angular2/platform/browser'

和customer.component.ts

import {Component, View} from 'angular2/core';

这是我被卡住的地方，不知道system.src.js正在尝试做什么或为什么它没有加载模块。

404错误代码

我的客户index.html将System.config软件包设置为'/'，我不清楚，但似乎有必要，因为浏览器网址是localhost / customer。 应如何设置此方案的System.config“包”选项？

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="layout">
<head>
    <title>Customer</title>
    <link href="http://maxcdn.bootstrapcdn.com/bootswatch/3.2.0/cerulean/bootstrap.min.css" rel="stylesheet" media="screen" />
    <script>
        System.config({
            packages: {
                // the browser url is http://localhost/customer
                '/': {
                    format: 'register',
                    defaultExtension: 'js'
                }
            }
        });
        // the browser url is http://localhost/customer
        System.import('boot').then(null, console.error.bind(console));
    </script>
</head>
<body>
<div layout:fragment="content">
    <div th:object="${customer}">
        <p>First Name: <span th:text="*{firstName}">FirstName</span></p>
        <p>Last Name: <span th:text="*{lastName}">LastName</span></p>
    </div>
    <div>
        <!-- ANGULAR CUSTOMER APP -->
        <customer>Loading...</customer>         
    </div>      
</div>
</body>
</html>

如果我将System.config包更改为'customer'，浏览器将获得404加载我的客户boot.js（已编译的客户boot.ts）。 这导致我走向其他一些变化

更改客户index.html System.import（'boot'）。然后（...）在'boot'上有.js，以便浏览器可以找到它

    <script>
        System.config({
            packages: {
                // the browser url is http://localhost/customer
                "customer": {
                    format: 'register',
                    defaultExtension: 'js'
                }
            }
        });
        // the browser url is http://localhost/customer
        System.import('boot.js').then(null, console.error.bind(console));
    </script>

将customer / boot.js更改为我的注册组件'./customer.component'的名称上的.js。

System.register(['angular2/platform/browser', './customer.component.js'], function(exports_1) {
    ...
}

这些更改导致客户应用程序工作，尽管有一个打字稿编译器错误“找不到模块./customer.component.js”。

手动编辑已编译的boot.js文件似乎不对。 有没有办法编译.ts文件，以便生成的.js文件显式引用.js文件？ 这似乎是我在咆哮错误的树。

我觉得客户index.html缺少一些东西，以及如何配置System.config选项。

Answer 1

我想我在这里遗漏了一些信息，但我遇到了同样的问题。 我不得不摆弄System.config和tsconfig.json文件。 tsconfig.json文件中的compilerOptions：outDir sourceRoot使我能够选择我自己的typescript源和输出目录。 我还从编译过程中排除了一些文件。

{
"compilerOptions": {
"target": "es5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,

"noEmitOnError": true,
"outDir": "./wwwroot/app",
"sourceRoot": "scripts",
"inlineSources": true
},

"exclude": [
"node_modules",
"wwwroot",
"typings/main",
"typings/main.d.ts"
]
}

在我的System.config中，我不得不为几个打字稿模块制作自己的映射。

System.config({
defaultJSExtensions: true,
packages: {
    'app': {
        format: 'register',
        defaultExtension: 'js'
    },
},

map: {
    'rxjs': 'vendor/js/rxjs',
    'angular2': 'vendor/js/angular2'
}
});

我的建议是：

另请查看您的tsconfig.json文件以解决编译问题。
借助System.config中的map选项，您可以解决运行时问题。

当由system.src.js加载时，Angular 2 app获得404 core.js和browser.js

问题描述

1 个解决方案

解决方案1
1 2016-03-11 10:40:15

当由system.src.js加载时，Angular 2 app获得404 core.js和browser.js

问题描述

1 个解决方案

解决方案1 1 2016-03-11 10:40:15

解决方案1
1 2016-03-11 10:40:15