Angular2 systemjs问题答案

【问题标题】：Angular2 systemjs issuesAngular2 systemjs问题
【发布时间】：2016-05-11 11:08:54
【问题描述】：

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

test.ts

import {Component} from 'angular2/core';

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

export class TestComponent {}

main.ts

import {bootstrap} from 'angular2/platform/browser'
import {TestComponent} from './components/test.component/test'

bootstrap(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>

最后，当我运行“tsc”和我的部署脚本时，node_modules/angular2、node_modules/systemjs、node_modules/rxjs 和 node_modules/es6-shim 文件夹与已编译的 JavaSciprt 文件一起被复制。然后，当我尝试打开 index.html 时，我得到的只是：

Uncaught ReferenceError: require is not defined(anonymous function) @ browser.ts:1

angular2-polyfills.js:138 Error: http://localhost:8080/node_modules/angular2/platform/browser.js did not call System.register or AMD define. If loading a global module configure the global name via the meta exports property for script injection support.(…)run @ angular2-polyfills.js:138zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$$internal$$tryCatch @ angular2-polyfills.js:1511lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:1523lib$es6$promise$$internal$$publish @ angular2-polyfills.js:1494lib$es6$promise$$internal$$publishRejection @ angular2-polyfills.js:1444(anonymous function) @ angular2-polyfills.js:243run @ angular2-polyfills.js:138zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$asap$$flush @ angular2-polyfills.js:1305

core.ts:6 Uncaught ReferenceError: require is not defined

有人可以帮我解决这个问题吗？我似乎在做与 Angular2 5 分钟快速入门 (https://angular.io/guide/quickstart) 或多或少相同的事情，但它只是拒绝为我工作。

感觉我还需要将依赖库添加到 systemjs，但我不确定什么是正确的方法，以及 angular2 人如何让他们的 quistart 演示与简单的 <script></script> 一起工作标签。

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"
    ]
}

【问题讨论】：

标签： dependencies angular systemjs

【解决方案1】：

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

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

您应该使用包含您的 TypeScript 源文件的子文件夹来更新它。类似的东西：

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

希望对你有帮助蒂埃里

【讨论】：

非常感谢！您的更改并没有完全解决我的问题。我的部署具有不同的结构（它没有 /app 文件夹），这就是我使用“/”包名称的原因。一旦我更改了 grunt 任务以将所有内容部署到 /app 而不是 / 然后我还进行了您上面建议的更改，最后我将 System.import('main') 更改为 System.import('app/main')。我不知道为什么 app 文件夹如此必要，但无论如何。再次感谢您的帮助！
不客气！事实上，像angular2/* 这样的模块已经被打包到像angular2-dev.js 这样的单个文件中，所以你的配置{ format: 'register', defaultExtension: 'js' } 不应该适用于这种情况。使用/ 使配置适用于所有...
说到这一点，我必须添加到 systemjs 的另一件事是 'node_modules': {format: 'cjs', defaultExtension: 'js' } 否则我会收到它不能的错误找到 angular2/browser，而实际上它正在寻找 angular2/browser.js。然而，我现在遇到的问题是错误：在 TestComponent 上找不到指令注释所以我不确定我是否修复了任何东西，或者我只是进一步破坏了它..
奇怪。事实上angular2/browser/platform 模块包含在node_modules/angular2/bundles/angular2.dev.js 文件中......在<script> 中添加文件就足够了;-)
我想通了——显然在 TypeScript 中导入“angular2/core”和“../node_modules/angular2/core”是两种截然不同的情况。当我做前者时，它终于全部工作了（在添加 /app 文件夹后，如前所述）。但是在我在导入语句中使用“node_modules”之前，Angular 最终使用 ajax 调用从头开始加载所有库以检索每个脚本，这最终在我面前爆炸，出现我提到的“无指令注释”错误。