Question

Angular / ts / js新手。我浏览了英雄之旅教程，现在我正在努力将编译和构建通过gulp进行整合。似乎进展得很好，但我似乎无法想象这个障碍。

在一个例子中，我有app / components / app.module.ts文件（忽略深层相对导入路径;我打算稍后重构）：

import { BrowserModule } from '../../node_modules/@angular/platform-browser';
import { NgModule } from '../../node_modules/@angular/core';
import { FormsModule } from '../../node_modules/@angular/forms';
import { HttpModule } from '../../node_modules/@angular/http';

import { InMemoryWebApiModule } from '../../node_modules/angular-in-memory-web-api';
import { InMemoryDataService } from './in-memory-data.service';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { HeroService } from './hero.service';
import { DashboardComponent } from './dashboard.component';
import { HeroesComponent } from './heroes.component';
import { HeroDetailComponent } from './hero-detail.component';
import { HeroSearchComponent } from './hero-search.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule,
    HttpModule,
    InMemoryWebApiModule.forRoot(InMemoryDataService, { delay: 600 })
  ],
  declarations: [
    AppComponent,
    DashboardComponent,
    HeroSearchComponent,
    HeroesComponent,
    HeroDetailComponent,
  ],
  providers: [HeroService],
  bootstrap: [AppComponent]
})
export class AppModule { }

在我将其编译为js并提供应用程序之后，控制台告诉我：

“无法获取/js/components/app.component”

（以及之后的所有其他模块），即使该位置存在js DOES。

我相信我发现它仍然期待它成为ts文件。如果我明确地将导入更改为js文件为

"import { AppComponent } from './app.component.js';"

然后加载很好。

在我的研究中，我想我可能需要一个源图，但在此我完全是绿色的我不确定。我不完全确定如何描述/定义问题，因此网络搜索没有给我带来任何确定性。有人能让我走上正轨吗？

更新这是我的gulpfile。还在学习，所以我知道它很乱。

// grab our packages
var gulp   = require('gulp'),
    jshint = require('gulp-jshint'),
    clean = require('gulp-clean'),
    connect = require('gulp-connect'),
    gnf = require('gulp-npm-files');

const tscConfig = require('./tsconfig.json');

var ts = require('gulp-typescript');
var merge = require('merge2');

// define the default task and add the watch task to it
gulp.task('default', ['watch']);

// configure the jshint task
gulp.task('jshint', function() {
  return gulp.src('app/components/js/**/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter('jshint-stylish'));
});

// configure which files to watch and what tasks to use on file changes
gulp.task('watch', function() {
  gulp.watch('app/components/js/**/*.js', ['jshint']);
});


gulp.task('compileTs', function () {
  var tsResult = gulp.src('app/**/*.ts')
      .pipe(ts({
          declaration: true
      }));

  return merge([
      tsResult.dts.pipe(gulp.dest('dist/definitions')),
      tsResult.js.pipe(gulp.dest('dist/js'))
  ]);
});

gulp.task('compileEnviroTs', function () {
  var tsResult = gulp.src('environments/**/*.ts')
      .pipe(ts({
          declaration: true
      }));

  return merge([
      tsResult.dts.pipe(gulp.dest('dist/definitions')),
      tsResult.js.pipe(gulp.dest('dist/environments'))
  ]);
});



gulp.task('cleanDist', function() {
  return gulp.src('dist', {read: false})
    .pipe(clean());
});


gulp.task('copyDeps', ['cleanDist'], function() {
  gulp
    .src(gnf(null, './package.json'), {base:'./'})
    .pipe(gulp.dest('dist'));
});


gulp.task('copyEnvironments', ['copyDeps'], function() {
  return gulp.src('environments/**/*')
    .pipe(gulp.dest('dist/environments'));
});

gulp.task('copyComponents', ['copyEnvironments'], function() {
  return gulp.src('app/components/**/*')
    .pipe(gulp.dest('dist/components'));
});

gulp.task('copyCss', ['copyComponents'], function() {
  return gulp.src('app/css/**/*')
    .pipe(gulp.dest('dist/css'));
});

gulp.task('copyImg', ['copyCss'], function() {
  return gulp.src('app/img/**/*')
    .pipe(gulp.dest('dist/img'));
});

gulp.task('copyJs', ['copyImg'], function() {
  return gulp.src('app/js/**/*')
    .pipe(gulp.dest('dist/js'));
});

gulp.task('copyPartials', ['copyJs'], function() {
  return gulp.src('app/partials/**/*')
    .pipe(gulp.dest('dist/partials'));
});

gulp.task('copyFiles', ['copyPartials'], function() {
  return gulp.src('app/**/*')
    .pipe(gulp.dest('dist'));
});


gulp.task('connect', ['copyFiles', 'compileTs'], function () {
  connect.server({
    root: 'dist/',
    port: 8888
  });
});


gulp.task('dev', ['cleanDist', 'compileTs', 'compileEnviroTs', 'copyDeps', 'copyFiles', 'connect']);

更新这是我的代码回购，如果有帮助的话。我在gulp分支。 https://github.com/fmjnax/LearningAngular.git

打字后模块没有加载

0 个答案: