Angular 2应用获取404 core.js和browser.js时，通过system.src.js加载

我刚刚开始使用Angular2，并且我遵循了Angular2快速入门和教程。Angular 2应用获取404 core.js和browser.js时，通过system.src.js加载

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

My project structure

当我加载主页的角码按预期工作，其视图渲染。 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 Error Code

我的客户的index.html具有设置为“/” System.config包这我不是清楚，但作为浏览器的URL为localhost /客户似乎有必要。 应该如何设置此场景的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包“客户”的浏览器获得了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>

更改客户/ 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选项。

来源

2016-01-31 Wade Garrett

我想我在这里错过了一些信息，但我遇到了同样的问题。我不得不摆弄System.config和tsconfig.json文件。 compilerOptions：tsconfig.json文件中的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选项，您可以解决运行时问题。

来源

2016-03-11 10:40:15

Angular 2应用获取404 core.js和browser.js时，通过system.src.js加载

回答

相关问题