Angular 2 应用程序在 system.src.js 加载时获得 404 core.js 和 browser.js答案

【问题标题】：Angular 2 app getting 404 core.js and browser.js when load by system.src.jsAngular 2 应用程序在 system.src.js 加载时获得 404 core.js 和 browser.js
【发布时间】：2016-05-08 17:23:07
【问题描述】：

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

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

My project structure

当我加载主页时，角度代码在呈现视图的位置按预期工作。主页 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。找不到 localhost/customer/angular2/platform/browser.js 或 localhost/customer/angular2/core.js 的是 system.src.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 Error Code

我的客户 index.html 将 System.config 包设置为“/”，我不清楚，但似乎有必要，因为浏览器 url 是 localhost/customer。 应该如何设置此场景的 System.config 'packages' 选项？

<!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 包更改为“客户”，浏览器会收到 404，加载我的客户 boot.js（已编译的客户 boot.ts）。这使我走向了其他一些变化

将客户 index.html System.import('boot').then(...) 更改为在 '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 选项。

【问题讨论】：

标签： javascript node.js typescript angular

【解决方案1】：

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

{
"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 选项，您或许可以解决运行时问题。

【讨论】：