Angular - trying import angular template shows 404 error









up vote
0
down vote

favorite












i searched the whole SO for any solution for this problem, every answer is the same: check if relative path to your template is correct. my problem is, i'm testing all possible paths, in different folders and that's no matter, in all folders my template is not being located, returning a 404 error.



Console Tab
enter image description here



Network tab
enter image description here



my webpack.config.js



const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports =
mode: 'development',
watch: true,
devtool: 'source-map',
entry: './src/index.js',
output:
path: path.resolve(__dirname, 'dist'),
filename: 'app.js'
,
module:
rules: [

test: /.css$/,
use: [

loader: MiniCssExtractPlugin.loader,
options:
publicPath: './dist'

,
"css-loader"
]
,

test: /.scss$/,
use: [
loader: "style-loader",
loader: "css-loader",
loader: "sass-loader"
]
,

test: /.(html)$/,
use: [
loader:'raw-loader'
]

]
,
stats:
errorDetails: true,
errors: true
,
devServer:
contentBase: './dist',
compress: true,
port: 9000,
publicPath: '/',
watchContentBase: true,
hot: true,
inline: true
,
plugins: [
new MiniCssExtractPlugin(
filename: "app.css",
chunkFilename: "[id].css"
),
new HtmlWebpackPlugin(
template: './index.html'
),
new webpack.HotModuleReplacementPlugin()
]
;


my index.js



import angular from 'angular'
import uirouter from '@uirouter/angularjs'
//import uirouterStateHelper from 'angular-ui-router.statehelper'
import 'bootstrap/dist/css/bootstrap.min.css'

angular.module('petApp', [uirouter])
.config(function($stateProvider, $urlRouterProvider)
// For any unmatched url, send to /
$urlRouterProvider.otherwise('/home')

var homeState =
name: 'home',
url: '/home',
templateUrl: './test.html',
controller: 'HomeController'


$stateProvider.state(homeState);
).controller('HomeController', HomeController)


function HomeController ($scope, $http)
console.log($scope);










share|improve this question





















  • try copy test.html to your dist folder , if working fine then check the webpack config rules
    – Zuko
    Nov 10 at 19:37










  • copied and worked... but my templates are stored under src/templates, what to do?
    – Leandro RR
    Nov 10 at 19:50






  • 1




    i'm not familar with webpack , you can google to find out. It's should be webpack copy src to dist or something smilar. Or try to place options: publicPath: './dist' after test.html loader config before using google :)
    – Zuko
    Nov 10 at 19:55










  • OK,i will check it out and post my answer here
    – Leandro RR
    Nov 10 at 20:02














up vote
0
down vote

favorite












i searched the whole SO for any solution for this problem, every answer is the same: check if relative path to your template is correct. my problem is, i'm testing all possible paths, in different folders and that's no matter, in all folders my template is not being located, returning a 404 error.



Console Tab
enter image description here



Network tab
enter image description here



my webpack.config.js



const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports =
mode: 'development',
watch: true,
devtool: 'source-map',
entry: './src/index.js',
output:
path: path.resolve(__dirname, 'dist'),
filename: 'app.js'
,
module:
rules: [

test: /.css$/,
use: [

loader: MiniCssExtractPlugin.loader,
options:
publicPath: './dist'

,
"css-loader"
]
,

test: /.scss$/,
use: [
loader: "style-loader",
loader: "css-loader",
loader: "sass-loader"
]
,

test: /.(html)$/,
use: [
loader:'raw-loader'
]

]
,
stats:
errorDetails: true,
errors: true
,
devServer:
contentBase: './dist',
compress: true,
port: 9000,
publicPath: '/',
watchContentBase: true,
hot: true,
inline: true
,
plugins: [
new MiniCssExtractPlugin(
filename: "app.css",
chunkFilename: "[id].css"
),
new HtmlWebpackPlugin(
template: './index.html'
),
new webpack.HotModuleReplacementPlugin()
]
;


my index.js



import angular from 'angular'
import uirouter from '@uirouter/angularjs'
//import uirouterStateHelper from 'angular-ui-router.statehelper'
import 'bootstrap/dist/css/bootstrap.min.css'

angular.module('petApp', [uirouter])
.config(function($stateProvider, $urlRouterProvider)
// For any unmatched url, send to /
$urlRouterProvider.otherwise('/home')

var homeState =
name: 'home',
url: '/home',
templateUrl: './test.html',
controller: 'HomeController'


$stateProvider.state(homeState);
).controller('HomeController', HomeController)


function HomeController ($scope, $http)
console.log($scope);










share|improve this question





















  • try copy test.html to your dist folder , if working fine then check the webpack config rules
    – Zuko
    Nov 10 at 19:37










  • copied and worked... but my templates are stored under src/templates, what to do?
    – Leandro RR
    Nov 10 at 19:50






  • 1




    i'm not familar with webpack , you can google to find out. It's should be webpack copy src to dist or something smilar. Or try to place options: publicPath: './dist' after test.html loader config before using google :)
    – Zuko
    Nov 10 at 19:55










  • OK,i will check it out and post my answer here
    – Leandro RR
    Nov 10 at 20:02












up vote
0
down vote

favorite









up vote
0
down vote

favorite











i searched the whole SO for any solution for this problem, every answer is the same: check if relative path to your template is correct. my problem is, i'm testing all possible paths, in different folders and that's no matter, in all folders my template is not being located, returning a 404 error.



Console Tab
enter image description here



Network tab
enter image description here



my webpack.config.js



const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports =
mode: 'development',
watch: true,
devtool: 'source-map',
entry: './src/index.js',
output:
path: path.resolve(__dirname, 'dist'),
filename: 'app.js'
,
module:
rules: [

test: /.css$/,
use: [

loader: MiniCssExtractPlugin.loader,
options:
publicPath: './dist'

,
"css-loader"
]
,

test: /.scss$/,
use: [
loader: "style-loader",
loader: "css-loader",
loader: "sass-loader"
]
,

test: /.(html)$/,
use: [
loader:'raw-loader'
]

]
,
stats:
errorDetails: true,
errors: true
,
devServer:
contentBase: './dist',
compress: true,
port: 9000,
publicPath: '/',
watchContentBase: true,
hot: true,
inline: true
,
plugins: [
new MiniCssExtractPlugin(
filename: "app.css",
chunkFilename: "[id].css"
),
new HtmlWebpackPlugin(
template: './index.html'
),
new webpack.HotModuleReplacementPlugin()
]
;


my index.js



import angular from 'angular'
import uirouter from '@uirouter/angularjs'
//import uirouterStateHelper from 'angular-ui-router.statehelper'
import 'bootstrap/dist/css/bootstrap.min.css'

angular.module('petApp', [uirouter])
.config(function($stateProvider, $urlRouterProvider)
// For any unmatched url, send to /
$urlRouterProvider.otherwise('/home')

var homeState =
name: 'home',
url: '/home',
templateUrl: './test.html',
controller: 'HomeController'


$stateProvider.state(homeState);
).controller('HomeController', HomeController)


function HomeController ($scope, $http)
console.log($scope);










share|improve this question













i searched the whole SO for any solution for this problem, every answer is the same: check if relative path to your template is correct. my problem is, i'm testing all possible paths, in different folders and that's no matter, in all folders my template is not being located, returning a 404 error.



Console Tab
enter image description here



Network tab
enter image description here



my webpack.config.js



const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports =
mode: 'development',
watch: true,
devtool: 'source-map',
entry: './src/index.js',
output:
path: path.resolve(__dirname, 'dist'),
filename: 'app.js'
,
module:
rules: [

test: /.css$/,
use: [

loader: MiniCssExtractPlugin.loader,
options:
publicPath: './dist'

,
"css-loader"
]
,

test: /.scss$/,
use: [
loader: "style-loader",
loader: "css-loader",
loader: "sass-loader"
]
,

test: /.(html)$/,
use: [
loader:'raw-loader'
]

]
,
stats:
errorDetails: true,
errors: true
,
devServer:
contentBase: './dist',
compress: true,
port: 9000,
publicPath: '/',
watchContentBase: true,
hot: true,
inline: true
,
plugins: [
new MiniCssExtractPlugin(
filename: "app.css",
chunkFilename: "[id].css"
),
new HtmlWebpackPlugin(
template: './index.html'
),
new webpack.HotModuleReplacementPlugin()
]
;


my index.js



import angular from 'angular'
import uirouter from '@uirouter/angularjs'
//import uirouterStateHelper from 'angular-ui-router.statehelper'
import 'bootstrap/dist/css/bootstrap.min.css'

angular.module('petApp', [uirouter])
.config(function($stateProvider, $urlRouterProvider)
// For any unmatched url, send to /
$urlRouterProvider.otherwise('/home')

var homeState =
name: 'home',
url: '/home',
templateUrl: './test.html',
controller: 'HomeController'


$stateProvider.state(homeState);
).controller('HomeController', HomeController)


function HomeController ($scope, $http)
console.log($scope);







angularjs webpack angular-ui-router






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 10 at 19:34









Leandro RR

251316




251316











  • try copy test.html to your dist folder , if working fine then check the webpack config rules
    – Zuko
    Nov 10 at 19:37










  • copied and worked... but my templates are stored under src/templates, what to do?
    – Leandro RR
    Nov 10 at 19:50






  • 1




    i'm not familar with webpack , you can google to find out. It's should be webpack copy src to dist or something smilar. Or try to place options: publicPath: './dist' after test.html loader config before using google :)
    – Zuko
    Nov 10 at 19:55










  • OK,i will check it out and post my answer here
    – Leandro RR
    Nov 10 at 20:02
















  • try copy test.html to your dist folder , if working fine then check the webpack config rules
    – Zuko
    Nov 10 at 19:37










  • copied and worked... but my templates are stored under src/templates, what to do?
    – Leandro RR
    Nov 10 at 19:50






  • 1




    i'm not familar with webpack , you can google to find out. It's should be webpack copy src to dist or something smilar. Or try to place options: publicPath: './dist' after test.html loader config before using google :)
    – Zuko
    Nov 10 at 19:55










  • OK,i will check it out and post my answer here
    – Leandro RR
    Nov 10 at 20:02















try copy test.html to your dist folder , if working fine then check the webpack config rules
– Zuko
Nov 10 at 19:37




try copy test.html to your dist folder , if working fine then check the webpack config rules
– Zuko
Nov 10 at 19:37












copied and worked... but my templates are stored under src/templates, what to do?
– Leandro RR
Nov 10 at 19:50




copied and worked... but my templates are stored under src/templates, what to do?
– Leandro RR
Nov 10 at 19:50




1




1




i'm not familar with webpack , you can google to find out. It's should be webpack copy src to dist or something smilar. Or try to place options: publicPath: './dist' after test.html loader config before using google :)
– Zuko
Nov 10 at 19:55




i'm not familar with webpack , you can google to find out. It's should be webpack copy src to dist or something smilar. Or try to place options: publicPath: './dist' after test.html loader config before using google :)
– Zuko
Nov 10 at 19:55












OK,i will check it out and post my answer here
– Leandro RR
Nov 10 at 20:02




OK,i will check it out and post my answer here
– Leandro RR
Nov 10 at 20:02












1 Answer
1






active

oldest

votes

















up vote
0
down vote













my solution was make webpack copy my templates from src/templates/ folder to my ./dist folder using the Copy Webpack Plugin https://github.com/webpack-contrib/copy-webpack-plugin
my strugle was, when running the development server it should (or not) copy the files at run time to dist, but i used the build command (after set the plugin) to copy the files and now is working fine.






share|improve this answer




















    Your Answer






    StackExchange.ifUsing("editor", function ()
    StackExchange.using("externalEditor", function ()
    StackExchange.using("snippets", function ()
    StackExchange.snippets.init();
    );
    );
    , "code-snippets");

    StackExchange.ready(function()
    var channelOptions =
    tags: "".split(" "),
    id: "1"
    ;
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function()
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled)
    StackExchange.using("snippets", function()
    createEditor();
    );

    else
    createEditor();

    );

    function createEditor()
    StackExchange.prepareEditor(
    heartbeatType: 'answer',
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader:
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    ,
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    );



    );













     

    draft saved


    draft discarded


















    StackExchange.ready(
    function ()
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53242688%2fangular-trying-import-angular-template-shows-404-error%23new-answer', 'question_page');

    );

    Post as a guest















    Required, but never shown

























    1 Answer
    1






    active

    oldest

    votes








    1 Answer
    1






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes








    up vote
    0
    down vote













    my solution was make webpack copy my templates from src/templates/ folder to my ./dist folder using the Copy Webpack Plugin https://github.com/webpack-contrib/copy-webpack-plugin
    my strugle was, when running the development server it should (or not) copy the files at run time to dist, but i used the build command (after set the plugin) to copy the files and now is working fine.






    share|improve this answer
























      up vote
      0
      down vote













      my solution was make webpack copy my templates from src/templates/ folder to my ./dist folder using the Copy Webpack Plugin https://github.com/webpack-contrib/copy-webpack-plugin
      my strugle was, when running the development server it should (or not) copy the files at run time to dist, but i used the build command (after set the plugin) to copy the files and now is working fine.






      share|improve this answer






















        up vote
        0
        down vote










        up vote
        0
        down vote









        my solution was make webpack copy my templates from src/templates/ folder to my ./dist folder using the Copy Webpack Plugin https://github.com/webpack-contrib/copy-webpack-plugin
        my strugle was, when running the development server it should (or not) copy the files at run time to dist, but i used the build command (after set the plugin) to copy the files and now is working fine.






        share|improve this answer












        my solution was make webpack copy my templates from src/templates/ folder to my ./dist folder using the Copy Webpack Plugin https://github.com/webpack-contrib/copy-webpack-plugin
        my strugle was, when running the development server it should (or not) copy the files at run time to dist, but i used the build command (after set the plugin) to copy the files and now is working fine.







        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Nov 10 at 20:25









        Leandro RR

        251316




        251316



























             

            draft saved


            draft discarded















































             


            draft saved


            draft discarded














            StackExchange.ready(
            function ()
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53242688%2fangular-trying-import-angular-template-shows-404-error%23new-answer', 'question_page');

            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            Popular posts from this blog

            Top Tejano songwriter Luis Silva dead of heart attack at 64

            政党

            天津地下鉄3号線