Currently working on developing a modern Angular application.
I have opted to use gulp-webpack for quick development builds. To handle my TypeScript bundling and node modules dependencies, I am relying on webpack. However, it seems that gulp-webpack is not resolving imports to the node_modules directory automatically! This issue results in numerous TypeScript errors stating that it cannot locate certain modules, such as angular, causing them to be missing from my bundle.
Below is an abbreviated version of my gulpfile:
// Dependencies
var gulp = require('gulp');
var path = require('path');
// var concat = require('gulp-concat');
var expect = require('gulp-expect-file');
var plumber = require('gulp-plumber');
var sourcemaps = require('gulp-sourcemaps');
// var uglify = require('gulp-uglify');
// Plugins
var webpack = require('gulp-webpack');
var sass = require('gulp-sass');
var nodemon = require('gulp-nodemon');
var ts = require('gulp-typescript');
var del = require('del');
var rename = require('gulp-rename');
var inject = require('gulp-inject-string');
// Task to bundle client-side JavaScript
gulp.task('js', function() {
gulp.safeSrc('src/app/main.ts')
.pipe(sourcemaps.init())
.pipe(webpack({
context: __dirname,
entry: ['./src/app/main'],
resolve: {
modulesDirectories: ["./node_modules"],
extensions: ['.ts', '.js']
},
resolveLoader: {
root: path.resolve(__dirname, 'node_modules')
},
output: {
filename: "bundle.js"
},
module: {
loaders: [{
test: /\.js$/,
loader: 'babel-loader'
},
{
test: /\.ts$/,
loader: 'ts-loader'
}
],
},
}))
.pipe(sourcemaps.write())
.pipe(gulp.dest('public'))
})
The issues start with my app.component.ts — encountering errors when importing 'zone.js'
ERROR in ./src/app/app.component.ts Module not found: Error: Cannot resolve module 'zone.js' in C:\appdir\src\app @ ./src/app/app.component.ts 12:0-18
import 'zone.js';
import 'reflect-metadata';
import { Component } from '@angular/core';
import { Observable } from 'rxjs/Rx';
import { Store } from '@ngrx/store';
import { AppStore } from '../models/application-store';
import { AuthSvc } from './auth/auth.svc';
import { Action } from './actions'
@Component({
selector: 'my-app',
template: `
<div class="app">
<main-header>
</main-header>
<router-outlet></router-outlet>
</div>`
})
export class AppComponent {
error: any;
showNgFor = false;
constructor() {
}
}
Any insights into what might be causing this issue?