javascript – 如何让Angular2在生成的分发文件夹中工作？

2023年1月4日 152次阅读

我正在尝试为Angular2 Typescript(SystemJS Gulp4)创建自己的初学者项目,但是当我在与 JavaScript相同的文件夹中编译TypeScript并访问node_modules文件夹以将所有内容放入时,我遇到了一些问题.一个dist文件夹(带编译JavaScript的dist / js和供应商文件的dist / js / lib(angular2.dev.js,http.dev.js,router.dev.js,Rx.js,system.src.js等) )).

你可以找到完整的项目on github (souldreamer/event-planner).

有人愿意采取一个雄鹅,看看我做错了什么？它可能是index.html中的SystemJS配置,因为根据我尝试的配置,我要么没有实际加载boot.js(网络选项卡显示所有内容都已加载,但System.import()承诺永远不会解析),或像core_1.Component这样的错误不是函数或core_1.当我还添加InputComponent时,输入不是函数.

注意：在你考虑将其标记为重复之前,我一直在搜索网络和版本. StackOverflow过去几天,并尝试了我能找到的每一个变体,所以它并不是一个真正的重复问题(即使有很多类似的问题).

这里包括一些我认为可能相关的部分,以防您不想查看整个项目：

> TypeScript编译(Gulp4任务)：

function tsCompile() {
  var tsResult = gulp
    .src(['./app/**/*.ts', './typings/**/*.ts'])
    .pipe(sourcemaps.init())
    .pipe(tsc(tsc.createProject('tsconfig.json')));

  return merge([
    tsResult.dts.pipe(gulp.dest('./typings/typescriptApp.d.ts')),
    tsResult.js
      .pipe(sourcemaps.write('.'))
      .pipe(gulp.dest('./dist/js'))
  ]);
}

> tsconfig.json

{
  "compilerOptions": {
    "outDir": "dist/js",
    "target": "ES5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  },
  "exclude": [
    "node_modules"
  ]
}

> index.html

<head>
  <base href="/">
  <link rel="stylesheet" href="styles.css">
  <!-- inject:libs -->
  <!--   add wanted libs to gulpfile -->
  <!--   this is replaced by the gulp task runner -->
  <!--   lib order: -->
  <!--     angular2-polyfills, system.src, Rx, -->
  <!--     angular2.dev, router.dev, http.dev -->
  <!-- endinject -->
  <script>
    System.config({
      baseUrl: './', // same result with this omitted
      transpiler: 'typescript', // same result with this omitted
      defaultJSExtensions: true,
      bundles: {
        './js/lib/angular2.dev.js': ['angular2/*']
      },
      packages: {
        js: {
          format: 'register',
          defaultExtension: 'js'
        }
      },
      paths: {
        'angular/http': './js/lib/router.dev.js',
        'angular/router': './js/lib/http.dev.js',
        'angular2/*': './js/lib/angular2.dev.js',
        'rx/*': './js/lib/Rx.js'
      }
    });
    System.import('js/boot')
      .then(
        function() {console.log('loaded')},
        console.error.bind(console)
      );
  </script>
</head>

<body>
  <main-app>Loading...</main-app>
</body>

</html>

> boot.ts(实际的Angular2应用程序是无关紧要的,它应该按原样工作,错误不在这里,为了完整性而包括在内)

import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from './components/app.component';

bootstrap(AppComponent, []);

> app.component.ts(实际的Angular2应用程序是无关紧要的,它应该按原样工作,错误不在这里,为了完整性而包括在内)

import {Component} from 'angular2/core';
import {InputComponent} from './input.component';

@Component({
  selector: 'main-app',
  template: `<h1>Hi!</h1>
  <input-component label="A"></input-component>
  <input-component label="B"></input-component>
  `,
  directives: [InputComponent]
})
export class AppComponent {

}

> input.component.ts(实际的Angular2应用程序是无关紧要的,它应该按原样工作,错误不在这里,为了完整性而包括在内)

import {Component, Input} from 'angular2/core';

@Component({
  selector: 'input-component',
  template: `
    <label [attr.for]="inputName">{{label}}
    <input #input [attr.id]="inputName" type="text"></label>
  `,
  styles: [
    `label { color: red; }`
  ]
})
export class InputComponent {
  public static latestId: number = 0;
  private inputId: number = InputComponent.latestId;
  @Input() public label: string = '';

  constructor() {
    InputComponent.latestId++;
  }
  get inputName(): string {
    return 'input-' + this.inputId;
  }
}

最佳答案 我设法找到解决方案,System.config()参数是错误的.这是有类似问题的人的工作版本：

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

其余的显然是照顾自己.

点赞