Dependencies Angular2系统问题_Dependencies_Angular_Systemjs

Dependencies Angular2系统问题

dependencies angular

Dependencies Angular2系统问题,dependencies,angular,systemjs,Dependencies,Angular,Systemjs,我有一个简单的TypeScript Angular 2示例： test.ts import {Component} from 'angular2/core'; @Component({ selector: 'my-app', template: '<div>Test</div>' }) export class TestComponent {} index.html <html> <head> <

我有一个简单的TypeScript Angular 2示例：

test.ts

import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: '<div>Test</div>'
})

export class TestComponent {}

index.html

<html>
    <head>
        <title>This is an Angular 2 test</title>

        <!-- Angular dependencies -->
        <script src="/node_modules/es6-shim/es6-shim.js"></script>
        <script src="/node_modules/systemjs/dist/system-polyfills.js"></script>
        <script src="/node_modules/angular2/bundles/angular2-polyfills.js"></script>
        <script src="/node_modules/systemjs/dist/system.src.js"></script>
        <script src="/node_modules/rxjs/bundles/Rx.js"></script>
        <script src="/node_modules/angular2/bundles/angular2.dev.js"></script>

        <!-- App -->
        <script>

            System.config({
                packages: {
                    '/': {
                        format: 'register',
                        defaultExtension: 'js'
                    }
                }
            });

            System.import('main').then(null, console.error.bind(console));

        </script>

    </head>
    <body>
        <my-app></my-app>
    </body>
</html>

有人能帮我一下吗。我似乎在做与Angular2 5分钟快速入门（）差不多的事情，但它对我来说根本不起作用

我觉得我还需要将依赖项库添加到systemjs中，但我不确定正确的方法是什么，angular2的家伙是如何让他们的quistart演示程序使用简单的

标记的

tsconfig.json

{
    "compilerOptions": {
        "target": "ES5",
        "module": "system",
        "moduleResolution" : "node",
        "sourceMap": true,
        "emitDecoratorMetadata": false,
        "experimentalDecorators": false,
        "removeComments": true,
        "noImplicitAny": true,
        "noEmitOnError": true,
        "outDir": "build"
    },

    "exclude": [
        "build",
        "bundle",
        "node_modules",
        "public",
        "scss",
        "html",
        "templates",
        ".sass-cache"
    ]
}

我认为问题在于SystemJS配置的级别：

System.config({
  packages: {
    '/': { <----------------
      format: 'register',
      defaultExtension: 'js'
    }
  }
});

希望它能帮助你，

蒂埃里

非常感谢！你的改变并没有完全解决我的问题。我的部署有一个不同的结构（它没有/app文件夹），这就是我使用“/”包名的原因。有一次，我将grunt任务更改为将所有内容部署到/app而不是/中，然后我也做了您在上面建议的更改，最后我将System.import（'main'）更改为System.import（'app/main'）。我不知道为什么应用程序文件夹如此必要，但不管怎样。再次感谢你的帮助！不客气！事实上，像

angular2/*

这样的模块已经打包到像

angular2-dev.js

这样的单个文件中，因此您的配置

{format:'register'，defaultExtension:'js'}

不应该应用于此类情况。使用

可以使配置适用于所有内容…说到这里，我必须向systemjs添加一个额外的东西，即“节点模块”：{format:'cjs'，defaultExtension:'js'}否则，我会遇到错误，它在实际查找angular2/browser.js时找不到angular2/browser。然而，我现在遇到的问题是错误：在TestComponent上找不到任何指令注释，所以我不确定是修复了任何东西，还是进一步破坏了它。奇怪。事实上，

angular2/browser/platform

模块包含在

node\u modules/angular2/bundles/angular2.dev.js

文件中。。。在

中添加文件就足够了；-）我明白了——显然在TypeScript中导入“angular2/core”和“./node_模块/angular2/core”是两种截然不同的情况。当我使用前一种方法时，它最终都起作用了（如前所述添加了/app文件夹）。但之前，当我在import语句中使用“node_modules”时，Angular最终使用ajax调用从头开始加载所有库来检索每个脚本，这最终在我面前爆发了我提到的“No Directive annotation”错误。

{
    "compilerOptions": {
        "target": "ES5",
        "module": "system",
        "moduleResolution" : "node",
        "sourceMap": true,
        "emitDecoratorMetadata": false,
        "experimentalDecorators": false,
        "removeComments": true,
        "noImplicitAny": true,
        "noEmitOnError": true,
        "outDir": "build"
    },

    "exclude": [
        "build",
        "bundle",
        "node_modules",
        "public",
        "scss",
        "html",
        "templates",
        ".sass-cache"
    ]
}

System.config({
  packages: {
    '/': { <----------------
      format: 'register',
      defaultExtension: 'js'
    }
  }
});

  System.config({
    packages: {        
      app: {
        format: 'register',
        defaultExtension: 'js'
      }
    }
  });