Angular2.0在子目录中，SystemJS不能导入角度分量 [英] Angular2.0 in subdirectory, SystemJS cant import angular components

问题描述

我正在开始使用Angular2.0。我一直在关注5分钟快速入门和一切工作正常，虽然我使用 grunt 来编译我的Typescript和一些Sass等。

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

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

因此，整个Angular应用程序应该在目录中存在。

index.html包含以下内容：

 < script type = text / javascriptsrc =/ talent / node_modules / systemjs / dist / system.src.js>< / script> 
< script type =text / javascriptsrc =/ 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：

 从'angular2 / angular2'导入{bootstrap，Component}; 
  

对应的Javascript：

  var angular2_1 = require（'angular2 / angular2'）; 
  

这会将请求发送到 http://example.dev/talent/

当我将node_modules文件夹和应用程序文件夹移动到Web服务器的根目录并删除 baseURL：'/ talent'它工作得很好。

以下是针对工作解决方案（根目录中的所有内容）和非工作部分（所有内容/人才）所提出的请求。

工作：

不工作：

您能帮我解决这个问题吗？ 如果这个问题完全相同，并且在几个小时后才算出来。需要在加载angular2.dev.js之前设置系统配置baseURL。这是因为System.register调用需要在注册时注意到baseURL。

例如

System.config（{baseURL：'/ talent'}）;

只是将System.config（{baseURL：'/ talent'}）添加到system.src.js文件的最底部。

I am getting started with Angular2.0. I have been following the 5 Min Quickstart and everything works fine although I am using grunt to compile my Typescript and some Sass etc.

I just have one problem I cant solve by myself. I want to move all the public files (generated Javascript and production node modules into a subdirectory. I need to have that, because I run different applications unter the same domian. The frontend depends on the user type that logged in. (backend is written with phalcon)

This is my public folder (the webserver's root)

So the whole Angular applications should live inside the "talent" directory.

The "index.html" contains the following:

<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 is able to load my app.js file correctly but then trys to import angular2:

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

Corresponding Javascript:

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

This sends a request to http://example.dev/talent/angular2/angular2 resulting in an 404 error.

When I move the node_modules folder and the app folder to the webserver's root and remove baseURL: '/talent' it works just fine.

Here are the requests made for both the working solution (everything at root) and the not working part (everything under /talent)

Working:

Not working:

Can you help me getting this to work?

解决方案

Had this exact same problem, and just figured it out after several hours. The System config baseURL needs to be set BEFORE angular2.dev.js is loaded. This is because the System.register calls need to be aware of the baseURL at the time of registrations.

e.g.

System.config({ baseURL: '/talent' });

A cleaner way is to just add System.config({ baseURL: '/talent' }) to the very bottom of the system.src.js file.

这篇关于Angular2.0在子目录中，SystemJS不能导入角度分量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！