The Author Online Book Forums are Moving

The Author Online Book Forums will soon redirect to Manning's liveBook and liveVideo. All book forum content will migrate to liveBook's discussion forum and all video forum content will migrate to liveVideo. Log in to liveBook or liveVideo with your Manning credentials to join the discussion!

Thank you for your engagement in the AoF over the years! We look forward to offering you a more enhanced forum experience.

6761 (5) [Avatar] Offline
#1
Capture.png
[ 57 KB ]
I am getting the following errors on the chrome dev tools when building and loading my app using the dev webpack.config.js.I am using component-relative url but I am getting the error below. I also noticed that the css and style loaders are not adding a <style> tag in the html. I am not sure what I am missing or not understanding? what the raw loader do with stringified version of the component template?



GET http://localhost:8080/home.component.html 404 (Not Found) zone.js:1382
Unhandled Promise rejection: Failed to load home.component.html ; Zone: <root> ; Task: Promise.then ; Value: Failed to load home.component.html undefined 


Home.component.ts

import { Component } from '@angular/core'

@Component({
    selector: 'my-home',
    templateUrl : './home.component.html'
})

export default class HomeComponent {

}


My webpack config looks like this

const path                     = require('path');
const CommonsChunkPlugin       = require('webpack/lib/optimize/CommonsChunkPlugin');
const CopyWebpackPlugin        = require('copy-webpack-plugin');
const DefinePlugin             = require('webpack/lib/DefinePlugin');
const ContextReplacementPlugin = require('webpack/lib/ContextReplacementPlugin');

const ENV  = process.env.NODE_ENV = 'development';
const HOST = process.env.HOST || 'localhost';
const PORT = process.env.PORT || 8080;



module.exports = {
  devServer: {
    contentBase: 'src',
    historyApiFallback: true,
    host: metadata.host,
    port: metadata.port
  },
  devtool: 'source-map',
  entry: {
    'main'  : './src/app/main.ts',
    'vendor': './src/app/vendor.ts'
  },
  module: {
    loaders: [
      {test: /\.css$/,  loader: 'raw', exclude: /node_modules/},
      {test: /\.css$/,  loader: 'style!css?-minimize', exclude: /src/},
      {test: /\.html$/, loader: 'raw'},
      {test: /\.ts$/,   loaders: 'ts'}
    ]
  },
  output: {
    path    : path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  plugins: [
    new CommonsChunkPlugin({name: 'vendor', filename: 'vendor.bundle.js', minChunks: Infinity}),
    new DefinePlugin({'webpack': {'ENV': JSON.stringify(ENV)}}),
    new CopyWebpackPlugin([{from: './src/client/index.html', to: 'index.html'}]),
    new ContextReplacementPlugin(
      // The (\\|\/) piece accounts for path separators in *nix and Windows
      /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
      path.join(__dirname, 'src') // location of your src
      )
  ],
  resolve: {
    extensions: ['.ts', '.js']
  }
};




Please help
Yakov Fain (219) [Avatar] Offline
#2
Try this:

templateUrl : 'home.component.html'
6761 (5) [Avatar] Offline
#3
Same issue...
Yakov Fain (219) [Avatar] Offline
#4
Are you using Webpack 2?
6761 (5) [Avatar] Offline
#5
yes.. here is my package.json

{
  "name": "angular2-webpack",
  "version": "1.0.0",
  "description": "angular2-webpack modified",
  "scripts": {
    "clean": "rimraf dist",
    "start": "webpack-dev-server --inline --progress --port 8080",
    "test": "karma start ./config/karma.conf.js",    
    "prebuild": "npm run clean",
    "build.dev": "webpack --config webpack.config.js --progress --profile --colors",
    "preserve:dist": "npm run build"
  },
  
  "dependencies": {
    "@angular/common": "~2.1.1",
    "@angular/compiler": "~2.1.1",
    "@angular/core": "~2.1.1",
    "@angular/forms": "~2.1.1",
    "@angular/http": "~2.1.1",
    "@angular/platform-browser": "~2.1.1",
    "@angular/platform-browser-dynamic": "~2.1.1",
    "@angular/router": "~3.1.1",
    "@angular/upgrade": "~2.1.1",
    "angular-in-memory-web-api": "~0.1.13",
    "bootstrap": "^3.3.7",
    "reflect-metadata": "^0.1.8",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "^0.6.26"
  },
  "devDependencies": {
    "@types/es6-shim": "0.31.32",
    "@types/jasmine": "^2.5.35",
    "@types/node": "^6.0.45",
    "@types/selenium-webdriver": "^2.53.32",
    "bootstrap": "^3.3.7",
    "compression-webpack-plugin": "^0.3.1",
    "copy-webpack-plugin": "^3.0.1",
    "css-loader": "^0.25.0",
    "dedupe-plugin": "^1.0.0",
    "html-loader": "^0.4.3",
    "jasmine-core": "~2.5.2",
    "karma": "^1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-firefox-launcher": "^1.0.0",
    "karma-jasmine": "^1.0.2",
    "karma-mocha-reporter": "^2.0.0",
    "karma-webpack": "^1.7.0",
    "protractor": "^4.0.9",
    "raw-loader": "^0.5.1",
    "rimraf": "^2.5.4",
    "source-map-loader": "^0.1.5",
    "style-loader": "^0.13.0",
    "to-string-loader": "^1.1.3",
    "ts-loader": "^0.8.2",
    "tslint": "^3.15.1",
    "typescript": "^2.0.3",
    "webpack": "^2.1.0-beta.25",
    "webpack-dev-server": "^2.1.0-beta.6"
  },
  "engines": {
    "node": "~6"
  }
}



My current project structure is show below

image


Anton Moiseev (27) [Avatar] Offline
#6
To make relative paths work with Webpack you need to use angular2-template-loader. Here is the config:

module: {
  loaders: [
    {test: /\.ts$/, loader: 'ts!angular2-template'}
    // rest of the loaders...
  ]
}


For the complete example see angular2-webpack-starter project from chapter 10.

css-loader parses CSS files and minifies the styles. style-loader inserts CSS as a <style> tag on the page, but it does it dynamically in the runtime. If you open the dev tools after the page is fully loaded you can find added <style> tags on the Elements tab in the DOM tree.
6761 (5) [Avatar] Offline
#7
Thanks Anton for clarifying the loaders. I didn't the styles were injected at runtime. Thought it was after the build..
Angular2-template-loader worked great.

Thanks!