angulaire.js - Comment introduire js css img dans le fichier d'actifs dans angulaire2
天蓬老师
天蓬老师 2017-05-15 17:12:52
0
2
1213

Pour les projets construits via Angular cli, js et css dans les actifs sont introduits dans index.html, mais les css et js correspondants ne peuvent pas être trouvés après l'exécution

Méthode d'introduction index.html
<script type="text/javascript" src="assets/js/template.js"></script>
<script type="text/ javascript" src="assets/js/custom.js"></script>

Il se peut qu'il y ait un problème avec le fichier de configuration emballé à l'aide de webpack.
J'ai suivi https://angular.cn/docs/ts/la...

        {
            test: /\.js$/,
            loader: 'jsx-loader?harmony',
            exclude: /node_modules/
        },

Cette partie a été ajoutée par moi plus tard

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var helpers = require('./helpers');

module.exports = {

entry: {
    'polyfills': './src/polyfills.ts',
    'vendor': './src/vendor.ts',
    'app': './src/main.ts'
},

resolve: {
    extensions: ['.ts', '.js']
},

module: {
    rules: [
        {
            test: /\.ts$/,
            loaders: [{
                loader: 'awesome-typescript-loader',
                options: { configFileName: helpers.root('', 'tsconfig.json') }
            } , 'angular2-template-loader']
        },
        {
            test: /\.html$/,
            loader: 'html-loader'
        },
        {
            test: /\.js$/,
            loader: 'jsx-loader?harmony',
            exclude: /node_modules/
        },
        {
            test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
            loader: 'file-loader?name=assets/[name].[hash].[ext]'
        },
        {
            test: /\.css$/,
            exclude: helpers.root('src', '/'),
            loader: ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: 'css-loader?sourceMap' })
        },
        {
            test: /\.css$/,
            include: helpers.root('src', '/'),
            loader: 'raw-loader'
        }
    ]
},

plugins: [
    // Workaround for angular/angular#11580
    new webpack.ContextReplacementPlugin(
        // The (\|\/) piece accounts for path separators in *nix and Windows
        /angular(\|\/)core(\|\/)(esm(\|\/)src|src)(\|\/)linker/,
        helpers.root('./src'), // location of your src
        {} // a map of your routes
    ),

    new webpack.optimize.CommonsChunkPlugin({
        name: ['app', 'vendor', 'polyfills']
    }),

    new HtmlWebpackPlugin({
        template: 'src/index.html'
    })
]

};

天蓬老师
天蓬老师

欢迎选择我的课程,让我们一起见证您的进步~~

répondre à tous(2)
黄舟

Tout d'abord, permettez-moi de corriger qu'Angular cli ne vous oblige à effectuer aucune configuration liée au webpacker, donc à en juger par le titre Il peut y avoir un problème avec le fichier de configuration emballé à l'aide de webpack. Il n'est pas nécessaire de faire quoi que ce soit après ce paragraphe.

OK, revenons au sujet.

assets est utilisé comme répertoire de ressources indépendant. En d'autres termes, qu'il s'agisse de ng serve ou de ng build, au final, . >assets est copié (ou mappé) directement. assets 是做为独立资源目录,换句话说不管是 ng serve 还是 ng build 最后都是直接将 assets 文件夹直接复制(或映射)过去。

那么很明显你请求的是一个404,那就说明没有把 assets/js 目录下的没有这些文件。

以上是解决你的问题。

但,真正的不应该这么做。

光从名称上看就知道你引入了一些第三方库,那这些第三方应该放在 .angular-cli.json

Ensuite, il est évident que ce que vous avez demandé est un 404, ce qui signifie qu'il n'y a pas ces fichiers dans le répertoire assets/js.

Ce qui précède est la solution à votre problème. 🎜 🎜Mais vous ne devriez vraiment pas faire ça. 🎜 🎜Juste par le nom, vous pouvez dire que vous avez introduit des bibliothèques tierces, et ces tierces parties doivent être configurées dans .angular-cli.json. 🎜
    "scripts": [
        "../node_modules/art-template/dist/template-debug.js" // 写上具体的第三方库的JS文件路径
    ]
🎜C'est tout. 🎜
滿天的星座

Vérifiez d’abord si le chemin est correct. Vous pouvez coller le chemin et voir.

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal