Angular JS 2沒有創建main.js

Question

我按照Angular JS2 TypScript的教程為我的設置添加了正確的路徑。 當我在瀏覽器中測試它時，它說它無法找到我的main.js文件。 我開始使用npm后嘗試過測試。 當npm開始時，它說“開始：未知作業：npm。然后我加載我的瀏覽器運行主索引文件，它說XHR錯誤（404 Not Found）加載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>

所以對於文件結構“希望這有幫助！”

index.php（由視圖創建）

• 資產文件夾
  • 角
    • node_modules（包含angular的所有核心文件）
    • 分型
    • 的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

這里更新是我的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 dir然后如果你使用php（你是）你不需要運行lite server所以運行npm run tsc:w而不是npm start通過typescript來看文件並編譯它當事情發生變化時