PatrickJS / NG6-starter

:ng: An AngularJS Starter repo for AngularJS + ES6 + Webpack
https://angularclass.github.io/NG6-starter
Apache License 2.0
1.91k stars 1.35k forks source link

Cannot find /app/app.html in build mode #172

Closed BkSouX closed 8 years ago

BkSouX commented 8 years ago

Hello,

I'm trying to run my application based on your starter but I can't find out why the build is not working. My architecture is like

src/ 
... app/
... ... app.js
... ... app.controller.js
... ... app.html
... index.html

Here is the paths object from gulpfile.babel.js

const paths = {
  js: './src/app/**/*!(.spec.js).js',
  styl: './src/app/**/*.scss', // stylesheets
  html: [
    './src/app/**/*.html',
    './src/index.html'
  ],
  entry: [
    'babel-polyfill',
    './src/app/app'
  ],
  output: './src',
  dest: './dist'
};

Everything's fine with the serve task. When I build the project and try it with a http server, I have a 404 not found for that file :

"GET /app/app.html" Error (404): "Not found"

I don't have a lot of things in my dist folder, I don't know where are all my html templates.

Would someone have an idea about that issue ?

Here is my webpack.config.js by the way, maybe it can help.

module.exports = {
  devtool: 'sourcemap',
  entry: {},
  module: {
    preLoaders: [
      { test: /\.js$/, loader: 'eslint', exclude: /node_modules/ }
    ],
    loaders: [
      { test: /\.js$/, exclude: [/node_modules/], loader: 'ng-annotate!babel' },
      { test: /\.html$/, loader: 'raw' },
      { test: /\.(css|scss)(\?]?.*)?$/, loader: ExtractTextPlugin.extract('style', 'css?sourceMap!postcss!sass') },
      { test: /\.(woff|woff2|ttf|eot|jpe?g|png|gif|svg)(\?]?.*)?$/, loader: 'file?name=res/[hash].[ext]' }
    ]
  },
  plugins: [
    new webpack.ProvidePlugin({
      moment: 'moment'
    }),
    new ExtractTextPlugin('style-[hash].css', { allChunks: false }),
    new HtmlWebpackPlugin({
      template: 'src/index.html',
      inject: 'body',
      hash: true
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: (module, count) => module.resource && module.resource.indexOf(path.resolve(__dirname, 'client')) === -1
    })
  ],
  postcss: () => [autoprefixer]
};

Bruno

BkSouX commented 8 years ago

Found it ! In my components, i was using templateUrl like this

import './app.scss';
import controller from './app.controller';
// import './images/svg-defs.svg';

const AppComponent = {
  controller,
  templateUrl: 'app/app.html'
};
export default AppComponent;

It works better like this:

import './app.scss';
import template from './app.html';
import controller from './app.controller';
// import './images/svg-defs.svg';

const AppComponent = {
  controller,
  template
};
export default AppComponent;