404 when loading templates from npm linked dependencies

[alvaro9210]

trafficstars

I am currently developing an Angular 2 project (Let's call it Workbench) which dependes on another Angular 2 project (Let's call it Panel). Panel provides of a lot of components which are then used in Workbench. At the same time I am developing Workbench, I make changes to Panel, so I need to view the changes immediately and that's why I linked the dependency with npm link ( npm link ../panel/dist) and after that Panel is being found by my bundler (Webpack 2) and its bundled correctly. Until here everything works fine, the problem comes when the browser loads the Workbench app because it doesn't find the templates of the components provided by the Panel component, it throws a 404 - Error Message. Here's a screenshot of the error messages:

As you can see, the angular2-template-loader is trying to resolve the templates by going to the src folder of the Workbench app, not the panel app. (http://127.0.0.1:8080/src/header.component.html)

Here's how I import the templates and styles of the components of Panel.

@Component( {
	selector: "cp-header",
	templateUrl: "./header.component.html",
	styleUrls: [ "./header.component.scss" ],
	host: {
		class: "ui navigation inverted menu"
	}
} )

And these are the Webpack rules for resolving file extensions:

module: {
  rules: [
    {
      test: /\.ts$/,
      use: [ "awesome-typescript-loader", "angular2-template-loader", "angular-router-loader" ]
    },
    {
      test: /\.json$/,
      use: "json-loader"
    },
    {
      test: /\.html$/,
      use: "raw-loader"
    },
    {
      test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
      use: "file-loader?name=assets/[name].[hash].[ext]"
    },
    {
      test: /\.css$/,
      use: [ "style-loader", "css-loader" ],
      include: [ helpers.root( "src", "styles" ) ]
    },
    {
      test: /\.scss$/,
      exclude: /node_modules/,
      use: [ "raw-loader", "sass-loader" ],
      // use: [ "style-loader", "css-loader", "sass-loader" ],
    },
  ]
},

Is it possible to have linked packages using angular2-template-loader?

[kharrak]

Hello, I have the same problem with loading component templates on version 0.6.1 version (pushed 2 hours ago) and I downgraded to 0.6.0 and locked it and problem fixed. Note: I'm using html-loader instead of raw-loader.

 {
      test: /\.html$/,
      use: "html-loader"
    },

[Gbuomprisco]

Hi - I seem to be having the exact same issue with my components, I locked the version to 0.6.0 for now :)

[kgjersda]

Same problem in one of our projects.

[keyiis]

+1