Question

我开始使用Angular2.0。我一直在关注5 Min Quickstart，虽然我使用grunt来编译我的Typescript和一些Sass等，但一切正常。

我只有一个问题，我自己无法解决。我想将所有公共文件（生成的Javascript和生产节点模块）移动到一个子目录中。我需要这样做，因为我运行不同的应用程序而不是相同的domian。前端取决于登录的用户类型。（后端写入与phalcon）

这是我的公共文件夹（网络服务器的根目录）

因此整个Angular应用程序应该在＆＃34; talent＆＃34;内部生活 。目录

＆＃34; index.html＆＃34;包含以下内容：

<script type="text/javascript" src="/talent/node_modules/systemjs/dist/system.src.js"></script>
<script type="text/javascript" src="/talent/node_modules/angular2/bundles/angular2.dev.js"></script>

<script>
    System.config({
        baseURL: '/talent',
        packages: {'app': {defaultExtension: 'js',}}
    });
    System.import('app/app');
</script>

SystemJs能够正确加载我的app.js文件，然后尝试导入angular2：

import {bootstrap, Component} from 'angular2/angular2';

对应的Javascript：

var angular2_1 = require('angular2/angular2');

这会向http://example.dev/talent/angular2/angular2发送请求，从而导致404错误。

当我将node_modules文件夹和app文件夹移动到网络服务器的根目录并删除baseURL: '/talent'时，它运行正常。

以下是对工作解决方案（根本上的所有内容）和不工作部分（/ talent下的所有内容）的请求

工作：

不工作：

你能帮助我开始工作吗？

Answer 1

有这个完全相同的问题，几个小时后才想出来。需要在加载angular2.dev.js之前设置系统配置baseURL。这是因为System.register调用需要在注册时知道baseURL。

e.g。

System.config（{baseURL：＆＃39; / talent＆＃39;}）;

更简洁的方法是将System.config（{baseURL：＆＃39; / talent＆＃39;}）添加到system.src.js文件的最底部。

Answer 2

您可以为每个库设置路径：

System.paths = {
    'angular2/*': '/talent/node_modules/angular2/*',
    'app/*': '/talent/app/*'
};

这对你有用吗？

Answer 3

'angular2/angular2'已被弃用。您的代码应引用'angular2/core'或导入的相应模块。

您也不需要在System.config中指定angular2导入的路径，因为系统会从HTML中的<script>标记加载它们。

您很可能收到404错误，因为angular2.dev.js文件正在加载'angular2/core'，'angular2/common'，'angular2/platform/browser'等等...您正在引用{{1这是没有注册的，因此SystemJS正试图出去找到它。

将所有'angular2/angular2'更改为正确的模块导入。您可以在angular.io的API预览页面上找到这些，或者希望您的IDE能够找到它。

Answer 4

我不知道您使用哪个版本的Angular2，但现在使用Beta版本，您应该使用这些Angular2模块：

import {bootstrap} from 'angular2/platform/browser';
import {Component} from 'angular2/core';

然后您需要按如下所述配置SystemJS：

<script>
  System.config({
    map: {
      app: 'talent/app'
    },
    packages: {        
      app: {
        format: 'register',
        defaultExtension: 'js'
      }
    }
  });
  System.import('app/boot')
        .then(null, console.error.bind(console));
</script>

使用此配置，在尝试加载app/boot模块时，SystemJS将从talent/app/boot.js文件加载之前编译的talent/app/boot.ts文件。此行为适用于app模块下的所有元素，但不适用于其他元素。

angular2/*等模块可以使用talent/node_modules/angular2/bundles/[something].js代码中包含的文件<script>找到。

我做了一些测试，这个配置对我有用; - ）

亨利

Answer 5

当我尝试从本地（dev）环境迁移到托管服务器（CentOS）时，我偶然发现了这个问题，其中部署的URL与我的本地主机不同。如果您处于这种情况并且接受的答案并未解决您的问题（我已经使用Angular2 Beta 15导入更新的导入）并且使用baseURL会混淆其他事情（就像在我的情况下那样）然后使用方法：

map: {
    app: 'path/to/app/folder'
},

我在这里看到它并且它对我有用（尽管它最初回答了MAMP环境问题）：Troubles with importing classes from Angular 2 modules with Typescript 1.7

Answer 6

这对我们有用：

使基本ref指向包含angular项目的子目录。这将确保找到所有node_module依赖项等。使用不同的APP_BASE_HREF配置PathLocationStrategy，以便html5模式仍适用于实际的角度应用程序。

bootstrap(AppComponent, [..... bind(APP_BASE_HREF).toValue("/yardmap/planning")

参考：https://angular.io/docs/ts/latest/api/common/index/APP_BASE_HREF-let.html

参考：https://angular.io/docs/ts/latest/guide/router.html

Answer 7

base href 大多数路由应用程序都应该在 index.html 中添加一个元素作为标记中的第一个子节点，告诉路由器如何编写导航URL。

<!DOCTYPE html>
<html>
 
<head lang="en">
    <base href="/talent/">
    ......
</head>

Angular2.0在子目录中，SystemJS无法导入角度组件

7 个答案: