国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

angular.js - angular2 如何引入 assets 檔案 中的js css img
天蓬老師
天蓬老師 2017-05-15 17:12:52
0
2
1319

透過(guò)angular cli 建構(gòu)的專案,在index.html 引入 assets 中的js 和css,運(yùn)行後找不到對(duì)應(yīng)的css 和js

index.html 引入方式

使用webpack打包的 配置有問(wèn)題吧.
我是按照 https://angular.cn/docs/ts/la... 這個(gè)做的

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

這部分是我自己後來(lái)加的.

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

varPlugin = 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'
    })
]
??};??
天蓬老師
天蓬老師

歡迎選擇我的課程,讓我們一起見(jiàn)證您的進(jìn)步~~

全部回覆(2)
黃舟

首先我先糾正一點(diǎn) angular cli 無(wú)須你再做任何webpacker的相關(guān)配置,所以從題目來(lái)看 使用webpack打包的 配置文件有問(wèn)題吧. 這段話以後的事全都不需要做。

OK,回到正題。

assets 是做為獨(dú)立資源目錄,換句話說(shuō)不管是 ng serve 還是 ng build 最后都是直接將 assets 資料夾直接複製(或映射)過(guò)去。

那麼很明顯你要求的是一個(gè)404,那就說(shuō)明沒(méi)有把 assets/js 目錄下的沒(méi)有這些檔案。

以上是解決你的問(wèn)題。

但,真正的不應(yīng)該這麼做。

光從名稱上看就知道你引入了一些第三方函式庫(kù),那這些第三方應(yīng)該放在 .angular-cli.json 裡面配置。

    "scripts": [
        "../node_modules/art-template/dist/template-debug.js" // 寫上具體的第三方庫(kù)的JS文件路徑
    ]

這樣就行了。

滿天的星座

先看看路徑是否真確,你可以把路徑貼出來(lái)看看。

最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板