Question

我按照Angular JS2 TypScript教程为我的设置添加了正确的路径。当我在浏览器中测试它时，它说它无法找到我的main.js文件。我开始使用npm后尝试过测试。当npm开始时它会说＆＃34;开始：未知的工作：npm。然后我加载我的浏览器运行主索引文件，它说XHR错误（404 Not Found）loading http://127.0.0.1/assets/scripts/app/main.js（...）

这是我的systemjs.config.js文件

(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: '',
      // angular bundles
      '@angular/core': 'npm:assets/angular/node_modules/@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:assets/angular/node_modules/@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:assets/angular/node_modules/@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:assets/angular/node_modules/@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:assets/angular/node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:assets/angular/node_modules/@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:assets/angular/node_modules/@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:assets/angular/node_modules/@angular/forms/bundles/forms.umd.js',
      // other libraries
      'rxjs':                       'npm:assets/angular/node_modules/rxjs',
      'angular2-in-memory-web-api': 'npm:assets/angular/node_modules/angular2-in-memory-web-api',
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        main: 'assets/scripts/app/main.js',
        defaultExtension: 'js'
      },
      rxjs: {
        defaultExtension: 'js'
      },
      'angular2-in-memory-web-api': {
        main: 'assets/scriopts/app/index.js',
        defaultExtension: 'js'
      }
    }
  });
})(this);

关于我的错误的任何想法？似乎typscript没有生成main.js但是我确实安装了typscript，并且工作正常以及所有有角度的东西没有错误。

正在构建应用程序以作为嵌套应用程序在现有网站内运行。因此，奇怪的文件结构的原因包括脚本下的应用程序文件。该应用程序被调用到该站点的header_view。

这里要求的是头文件，其中包含用于加载库的脚本：

  <!-- 1. Load libraries -->
         <!-- Polyfill(s) for older browsers -->
        <script src="<?=base_url();?>assets/angular/node_modules/core-js/client/shim.min.js"></script>
        <script src="<?=base_url();?>assets/angular/node_modules/zone.js/dist/zone.js"></script>
        <script src="<?=base_url();?>assets/angular/node_modules/reflect-metadata/Reflect.js"></script>
        <script src="<?=base_url();?>assets/angular/node_modules/systemjs/dist/system.src.js"></script>
        <!-- 2. Configure SystemJS -->
        <script src="<?=base_url();?>assets/angular/systemjs.config.js"></script>
        <script>
            System.import('app').catch(function(err){ console.error(err); });
        </script>

此应用程序正被添加到Codeingiter应用程序中，因此我提供的是header_view

然后在主体里面我有

<my-app>Loading...</my-app>

所以对于文件结构＆＃34;希望这有帮助！＆＃34;

index.php（由视图创建）

资产文件夹
- 角
  - node_modules（包含角度的所有核心文件）
  - typings
  - 的package.json
  - systemjs.config.js
  - tsconfig.json
  - typings.json
- 脚本
  - 应用
    - app.component.ts
    - app.main.ts
    - app.module.ts

此外，我只是按照下面的教程来达到这一点。 https://angular.io/docs/ts/latest/quickstart.html#!#prereq

UPDATE 这是我的app.main.ts文件

import { platformBrowserDynamic } from 'assets/scripts/node_modules/@angular/platform-browser-dynamic';
import { AppModule } from ''app.module';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

提前谢谢！

Answer 1

问题是改变了最初看起来像

的文件结构（和一些拼写错误）

应用
- app.component.ts
- app.module.ts
- main.ts
node_modules ...
打字......
的index.html
package.json
styles.css的
systemjs.config.js
tsconfig.json
typings.json

您必须将所有角度项目文件移动到scripts目录然后，如果你使用的是php（你是），你不需要运行lite server 所以运行npm run tsc:w而不是npm start来通过typescript来监视文件并在发生变化时进行编译

Angular JS 2没有创建main.js

1 个答案: